Skip to content

Commit 6050e16

Browse files
author
Marko Petzold
committed
feat: update gauge theme to use 'chalk' and modify default data structure
1 parent 760011b commit 6050e16

File tree

4 files changed

+377
-32
lines changed

4 files changed

+377
-32
lines changed

‎demo/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
const tag = unsafeStatic(`widget-gauge-${packageJson.version}`)
3232
import '../dist/widget-gauge.js'
3333
const data = await fetch('../src/default-data.json').then((res) => res.json())
34-
const themeObject = await fetch('themes/vintage.json').then((res) => res.json())
35-
const theme = { theme_name: 'vintage', theme_object: themeObject }
34+
const themeObject = await fetch('themes/chalk.json').then((res) => res.json())
35+
const theme = { theme_name: 'chalk', theme_object: themeObject }
3636
render(
3737
html`
3838
<${tag} .theme="${theme}" .inputData=${data}>

‎demo/themes/chalk.json‎

Lines changed: 354 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,354 @@
1+
{
2+
"color": ["#fc97af", "#87f7cf", "#f7f494", "#72ccff", "#f7c5a0", "#d4a4eb", "#d2f5a6", "#76f2f2"],
3+
"backgroundColor": "rgba(41,52,65,1)",
4+
"textStyle": {},
5+
"title": {
6+
"textStyle": {
7+
"color": "#ffffff"
8+
},
9+
"subtextStyle": {
10+
"color": "#dddddd"
11+
}
12+
},
13+
"line": {
14+
"itemStyle": {
15+
"borderWidth": "4"
16+
},
17+
"lineStyle": {
18+
"width": "3"
19+
},
20+
"symbolSize": "0",
21+
"symbol": "circle",
22+
"smooth": true
23+
},
24+
"radar": {
25+
"itemStyle": {
26+
"borderWidth": "4"
27+
},
28+
"lineStyle": {
29+
"width": "3"
30+
},
31+
"symbolSize": "0",
32+
"symbol": "circle",
33+
"smooth": true
34+
},
35+
"bar": {
36+
"itemStyle": {
37+
"barBorderWidth": 0,
38+
"barBorderColor": "#ccc"
39+
}
40+
},
41+
"pie": {
42+
"itemStyle": {
43+
"borderWidth": 0,
44+
"borderColor": "#ccc"
45+
}
46+
},
47+
"scatter": {
48+
"itemStyle": {
49+
"borderWidth": 0,
50+
"borderColor": "#ccc"
51+
}
52+
},
53+
"boxplot": {
54+
"itemStyle": {
55+
"borderWidth": 0,
56+
"borderColor": "#ccc"
57+
}
58+
},
59+
"parallel": {
60+
"itemStyle": {
61+
"borderWidth": 0,
62+
"borderColor": "#ccc"
63+
}
64+
},
65+
"sankey": {
66+
"itemStyle": {
67+
"borderWidth": 0,
68+
"borderColor": "#ccc"
69+
}
70+
},
71+
"funnel": {
72+
"itemStyle": {
73+
"borderWidth": 0,
74+
"borderColor": "#ccc"
75+
}
76+
},
77+
"gauge": {
78+
"itemStyle": {
79+
"borderWidth": 0,
80+
"borderColor": "#ccc"
81+
}
82+
},
83+
"candlestick": {
84+
"itemStyle": {
85+
"color": "#fc97af",
86+
"color0": "transparent",
87+
"borderColor": "#fc97af",
88+
"borderColor0": "#87f7cf",
89+
"borderWidth": "2"
90+
}
91+
},
92+
"graph": {
93+
"itemStyle": {
94+
"borderWidth": 0,
95+
"borderColor": "#ccc"
96+
},
97+
"lineStyle": {
98+
"width": "1",
99+
"color": "#ffffff"
100+
},
101+
"symbolSize": "0",
102+
"symbol": "circle",
103+
"smooth": true,
104+
"color": ["#fc97af", "#87f7cf", "#f7f494", "#72ccff", "#f7c5a0", "#d4a4eb", "#d2f5a6", "#76f2f2"],
105+
"label": {
106+
"color": "#293441"
107+
}
108+
},
109+
"map": {
110+
"itemStyle": {
111+
"areaColor": "#f3f3f3",
112+
"borderColor": "#999999",
113+
"borderWidth": 0.5
114+
},
115+
"label": {
116+
"color": "#893448"
117+
},
118+
"emphasis": {
119+
"itemStyle": {
120+
"areaColor": "rgba(255,178,72,1)",
121+
"borderColor": "#eb8146",
122+
"borderWidth": 1
123+
},
124+
"label": {
125+
"color": "rgb(137,52,72)"
126+
}
127+
}
128+
},
129+
"geo": {
130+
"itemStyle": {
131+
"areaColor": "#f3f3f3",
132+
"borderColor": "#999999",
133+
"borderWidth": 0.5
134+
},
135+
"label": {
136+
"color": "#893448"
137+
},
138+
"emphasis": {
139+
"itemStyle": {
140+
"areaColor": "rgba(255,178,72,1)",
141+
"borderColor": "#eb8146",
142+
"borderWidth": 1
143+
},
144+
"label": {
145+
"color": "rgb(137,52,72)"
146+
}
147+
}
148+
},
149+
"categoryAxis": {
150+
"axisLine": {
151+
"show": true,
152+
"lineStyle": {
153+
"color": "#666666"
154+
}
155+
},
156+
"axisTick": {
157+
"show": false,
158+
"lineStyle": {
159+
"color": "#333333"
160+
}
161+
},
162+
"axisLabel": {
163+
"show": true,
164+
"color": "#aaaaaa"
165+
},
166+
"splitLine": {
167+
"show": false,
168+
"lineStyle": {
169+
"color": ["#e6e6e6"]
170+
}
171+
},
172+
"splitArea": {
173+
"show": false,
174+
"areaStyle": {
175+
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
176+
}
177+
}
178+
},
179+
"valueAxis": {
180+
"axisLine": {
181+
"show": true,
182+
"lineStyle": {
183+
"color": "#666666"
184+
}
185+
},
186+
"axisTick": {
187+
"show": false,
188+
"lineStyle": {
189+
"color": "#333333"
190+
}
191+
},
192+
"axisLabel": {
193+
"show": true,
194+
"color": "#aaaaaa"
195+
},
196+
"splitLine": {
197+
"show": false,
198+
"lineStyle": {
199+
"color": ["#e6e6e6"]
200+
}
201+
},
202+
"splitArea": {
203+
"show": false,
204+
"areaStyle": {
205+
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
206+
}
207+
}
208+
},
209+
"logAxis": {
210+
"axisLine": {
211+
"show": true,
212+
"lineStyle": {
213+
"color": "#666666"
214+
}
215+
},
216+
"axisTick": {
217+
"show": false,
218+
"lineStyle": {
219+
"color": "#333333"
220+
}
221+
},
222+
"axisLabel": {
223+
"show": true,
224+
"color": "#aaaaaa"
225+
},
226+
"splitLine": {
227+
"show": false,
228+
"lineStyle": {
229+
"color": ["#e6e6e6"]
230+
}
231+
},
232+
"splitArea": {
233+
"show": false,
234+
"areaStyle": {
235+
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
236+
}
237+
}
238+
},
239+
"timeAxis": {
240+
"axisLine": {
241+
"show": true,
242+
"lineStyle": {
243+
"color": "#666666"
244+
}
245+
},
246+
"axisTick": {
247+
"show": false,
248+
"lineStyle": {
249+
"color": "#333333"
250+
}
251+
},
252+
"axisLabel": {
253+
"show": true,
254+
"color": "#aaaaaa"
255+
},
256+
"splitLine": {
257+
"show": false,
258+
"lineStyle": {
259+
"color": ["#e6e6e6"]
260+
}
261+
},
262+
"splitArea": {
263+
"show": false,
264+
"areaStyle": {
265+
"color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
266+
}
267+
}
268+
},
269+
"toolbox": {
270+
"iconStyle": {
271+
"borderColor": "#999999"
272+
},
273+
"emphasis": {
274+
"iconStyle": {
275+
"borderColor": "#666666"
276+
}
277+
}
278+
},
279+
"legend": {
280+
"textStyle": {
281+
"color": "#999999"
282+
}
283+
},
284+
"tooltip": {
285+
"axisPointer": {
286+
"lineStyle": {
287+
"color": "#cccccc",
288+
"width": 1
289+
},
290+
"crossStyle": {
291+
"color": "#cccccc",
292+
"width": 1
293+
}
294+
}
295+
},
296+
"timeline": {
297+
"lineStyle": {
298+
"color": "#87f7cf",
299+
"width": 1
300+
},
301+
"itemStyle": {
302+
"color": "#87f7cf",
303+
"borderWidth": 1
304+
},
305+
"controlStyle": {
306+
"color": "#87f7cf",
307+
"borderColor": "#87f7cf",
308+
"borderWidth": 0.5
309+
},
310+
"checkpointStyle": {
311+
"color": "#fc97af",
312+
"borderColor": "#fc97af"
313+
},
314+
"label": {
315+
"color": "#87f7cf"
316+
},
317+
"emphasis": {
318+
"itemStyle": {
319+
"color": "#f7f494"
320+
},
321+
"controlStyle": {
322+
"color": "#87f7cf",
323+
"borderColor": "#87f7cf",
324+
"borderWidth": 0.5
325+
},
326+
"label": {
327+
"color": "#87f7cf"
328+
}
329+
}
330+
},
331+
"visualMap": {
332+
"color": ["#fc97af", "#87f7cf"]
333+
},
334+
"dataZoom": {
335+
"backgroundColor": "rgba(255,255,255,0)",
336+
"dataBackgroundColor": "rgba(114,204,255,1)",
337+
"fillerColor": "rgba(114,204,255,0.2)",
338+
"handleColor": "#72ccff",
339+
"handleSize": "100%",
340+
"textStyle": {
341+
"color": "#333333"
342+
}
343+
},
344+
"markPoint": {
345+
"label": {
346+
"color": "#293441"
347+
},
348+
"emphasis": {
349+
"label": {
350+
"color": "#293441"
351+
}
352+
}
353+
}
354+
}

‎src/default-data.json‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,5 @@
11
{
22
"dataseries": [
3-
{
4-
"label": "Demo Gauge Temperature",
5-
"unit": "°C",
6-
"precision": 1,
7-
"data": [
8-
{
9-
"value": 90
10-
}
11-
],
12-
"sections": {
13-
"sectionLimits": [-20, 80, 90, 120],
14-
"backgroundColors": [null, null, null]
15-
},
16-
"advanced": {
17-
"averageLatest": 1
18-
}
19-
},
203
{
214
"label": "Demo Gauge Pascal",
225
"unit": "Pa",

0 commit comments

Comments
 (0)