Chartbuilder/src/styl/chart-renderer.styl at 7c7baf5218c5af634660a532a9b2dbd97d9f43c0 · Quartz/Chartbuilder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
$em_size = 20px
$em_size_small = 14px
$em_size_large = 36px

div.renderer-wrapper
  font-smoothing antialiased
  width 100%
  margin 0
  padding 0
	.em-size-wrapper
		width 100%
	.em-size
		position absolute
		visibility hidden
		top 0
		line-height 1em
		margin 0 0 0 -1000px
		padding 0
		width 1em
		height 1em

svg
  &.renderer-svg
    fill $color-bg
    font-family $font-sans-light
    text-rendering optimizeLegibility
    box-sizing border-box
    .svg-background
      fill $color-bg
    tspan
      height 1em
      line-height 1em

.d4
  font-size $em_size
  .leftAxis path.domain
    display none
  .xAxis path.domain
    display none
  .axis
    .tick
      font-family $font-sans-light
      &[data-anchor="middle"]
        text
          text-anchor middle
      text
        fill $color-chart-axis-text
        shape-rendering crispEdges
        text-anchor middle
      &:first-child
        text
          text-anchor middle
      line
        fill none
        stroke $color-chart-gridline
        stroke-width 1px
        shape-rendering crispEdges
      &.zero
        line
          stroke $color-chart-zeroline
      rect
        fill $color-bg
        shape-rendering crispEdges

    &.leftAxis
      text
        text-anchor start

    &.rightAxis
      text
        text-anchor end
    &[data-scale="time"]
      .tick:not([data-anchor="middle"])
        text
          text-anchor start
      .tick:first-child
        text
          text-anchor start
  .xAxislabel
    fill $color-chart-axis-text
  .concealer-label
    font-family $font-sans-light
    text
      fill $color-chart-axis-text
    rect
      fill $color-bg

  .connectors line
    fill none
    stroke-width 1px

  line.zero
    stroke $color-chart-zeroline
    shape-rendering crispEdges

  .margins
    .line, .other-line
      path
        fill none
        stroke-width 3px
        stroke-linecap round
        stroke-linejoin round
    .label
      font-family $font-sans-light

  .column-label
    fill $color-chart-axis-text

  line.no-label-tick
    fill none
    stroke $color-chart-gridline
    stroke-width 1px
    shape-rendering crispEdges

.svg-text
  font-family $font-sans-light
  font-size $em_size

  tspan
    &.em
      font-style italic

    &.strong
      font-family $font-sans-bold

    &.strong .em, &.em .strong
      font-family $font-sans-bold
      font-style italic

  &.svg-text-credit
    font-size $em_size*0.6
    fill $color-chart-meta
    text-anchor start
  &.svg-text-source
    font-size $em_size*0.6
    fill $color-chart-meta
    //text
      //dominant-baseline central
    &.left
      text-anchor start
    &.right
      text-anchor end
  &.svg-text-title
    fill $color-body-text
    font-family $font-sans
    font-size $em_size
  &.svg-text-sub
    fill $color-chart-axis-text
    font-family $font-sans-light
    font-size $em_size

.svg-source-pipe
	stroke $color-chart-meta
	fill none
	stroke-width 0.8px

.svg-label-text
  font-size $em_size
  font-family $font-sans-light
  &.draggable
    cursor move

.crosshair
  line
    stroke-width 1
    shape-rendering crispEdges
    stroke black

.hidden-svg
  visibility hidden

.medium
  .em-size
    font-size $em_size
  .d4
    font-size $em_size

    .margins
      .line, .other-line
        path
          stroke-width 3px

  .svg-text
    font-size $em_size
    &.svg-text-credit
      font-size $em_size*0.6
    &.svg-text-source
      font-size $em_size*0.6
    &.svg-text-title
      font-size $em_size

.small
  .em-size
    font-size $em_size_small
  .d4
    font-size $em_size_small

    .margins
      .line, .other-line
        path
          stroke-width 2px

  .svg-text
    font-size $em_size_small
    &.svg-text-credit
      font-size $em_size*0.5
    &.svg-text-source
      font-size $em_size*0.5
    &.svg-text-pipe
      text
        dominant-baseline central
        font-size $em_size*0.6
    &.svg-text-title
      font-size $em_size_small

  .svg-label-text
    font-size $em_size_small


.large
  .em-size
    font-size $em_size
  .d4
    font-size $em_size
    .margins
      .line, .other-line
        path
          stroke-width 4px

  .svg-text
    font-size $em_size
    &.svg-text-credit
      font-size $em_size*0.6
    &.svg-text-source
      font-size $em_size*0.6
    &.svg-text-title
      font-size $em_size

  .svg-label-text
    font-size $em_size

.cb-credit-logo
	fill $color-chart-meta