Skip to content

Commit ccfc5f4

Browse files
benderlbenderl
authored
Merge pull request #2174 from cshagen/web-fixes
Colors theme fixes
2 parents aed1345 + 42025f0 commit ccfc5f4

14 files changed

Lines changed: 187 additions & 168 deletions

File tree

‎packages/modules/web_themes/colors/source/package.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,36 +19,36 @@
1919
"d3": "^7.9.0",
2020
"mqtt": "^5.10.3",
2121
"process": "^0.11.10",
22-
"swiper": "^11.1.15",
22+
"swiper": "^11.2.1",
2323
"vue": "^3.3.4"
2424
},
2525
"devDependencies": {
26-
"@babel/types": "^7.26.3",
26+
"@babel/types": "^7.26.7",
2727
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
2828
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
29-
"@eslint/compat": "^1.2.4",
29+
"@eslint/compat": "^1.2.5",
3030
"@eslint/eslintrc": "^3.2.0",
3131
"@eslint/js": "^9.17.0",
32-
"@rushstack/eslint-patch": "^1.10.4",
32+
"@rushstack/eslint-patch": "^1.10.5",
3333
"@tsconfig/node20": "^20.1.4",
3434
"@types/bootstrap": "^5.2.10",
3535
"@types/d3": "^7.4.3",
36-
"@types/node": "^20.17.11",
36+
"@types/node": "^20.17.16",
3737
"@typescript-eslint/eslint-plugin": "^8.19.0",
3838
"@typescript-eslint/parser": "^8.0.0",
3939
"@vitejs/plugin-vue": "^5.2.1",
40-
"@vue/eslint-config-prettier": "^10.1.0",
41-
"@vue/eslint-config-typescript": "^14.2.0",
40+
"@vue/eslint-config-prettier": "^10.2.0",
41+
"@vue/eslint-config-typescript": "^14.3.0",
4242
"@vue/tsconfig": "^0.7.0",
4343
"esbuild": "^0.24.2",
44-
"eslint": "^9.17.0",
44+
"eslint": "^9.19.0",
4545
"eslint-plugin-vue": "^9.32.0",
4646
"npm-run-all2": "^7.0.2",
4747
"prettier": "^3.4.2",
48-
"rollup": "^4.29.1",
48+
"rollup": "^4.32.0",
4949
"rollup-plugin-polyfill-node": "^0.13.0",
50-
"typescript": "^5.7.2",
51-
"vite": "^6.0.6",
50+
"typescript": "^5.7.3",
51+
"vite": "^6.0.11",
5252
"vue-tsc": "^2.2.0"
5353
}
5454
}

‎packages/modules/web_themes/colors/source/src/components/powerGraph/PgSoc.vue‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
11
<template>
2-
<path
3-
:id="'soc-' + vID"
4-
.origin="autozoom"
5-
class="soc-baseline"
6-
:d="myline"
7-
stroke="var(--color-bg)"
8-
stroke-width="1"
9-
fill="none"
10-
/>
11-
<path
12-
:id="'socdashes-' + vID"
13-
class="soc-dashes"
14-
:d="myline"
15-
:stroke="cpColor"
16-
stroke-width="1"
17-
:style="{ strokeDasharray: '3,3' }"
18-
fill="none"
19-
/>
20-
<text
21-
class="cpname"
22-
:x="nameX"
23-
:y="nameY"
24-
:style="{ fill: cpColor, fontSize: 10 }"
25-
:text-anchor="textPosition"
26-
>
27-
{{ vName }}
28-
</text>
2+
<svg x="0" :width="props.width">
3+
<path
4+
:id="'soc-' + vID"
5+
.origin="autozoom"
6+
class="soc-baseline"
7+
:d="myline"
8+
stroke="var(--color-bg)"
9+
stroke-width="1"
10+
fill="none"
11+
/>
12+
<path
13+
:id="'socdashes-' + vID"
14+
class="soc-dashes"
15+
:d="myline"
16+
:stroke="cpColor"
17+
stroke-width="1"
18+
:style="{ strokeDasharray: '3,3' }"
19+
fill="none"
20+
/>
21+
<text
22+
class="cpname"
23+
:x="nameX"
24+
:y="nameY"
25+
:style="{ fill: cpColor, fontSize: 10 }"
26+
:text-anchor="textPosition"
27+
>
28+
{{ vName }}
29+
</text>
30+
</svg>
2931
</template>
3032

3133
<script setup lang="ts">

‎packages/modules/web_themes/colors/source/src/components/powerGraph/PgSourceGraph.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ const ticklineColor = computed(() => {
173173
return globalConfig.showGrid ? 'var(--color-grid)' : 'var(--color-bg)'
174174
})
175175
function drawGraph(
176-
graph: Selection<SVGGElement, unknown, HTMLElement, never>,
176+
graph: Selection<SVGGElement, unknown, HTMLElement, unknown>,
177177
xScale: ScaleTime<number, number, never>,
178178
) {
179179
const area0 = area()
@@ -187,7 +187,8 @@ function drawGraph(
187187
.curve(curveBumpX)
188188
if (animateSourceGraph) {
189189
graph.selectAll('*').remove()
190-
paths = graph
190+
const canvas = graph.append('svg').attr('x', 0).attr('width', props.width)
191+
paths = canvas
191192
.selectAll('.sourceareas')
192193
.data(stackedSeries.value as [number, number][][])
193194
.enter()

‎packages/modules/web_themes/colors/source/src/components/powerGraph/PgUsageGraph.vue‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,9 @@ const delay = globalConfig.showAnimations ? globalConfig.animationDelay : 0
8282
8383
// computed:
8484
const draw = computed(() => {
85-
const graph = select('g#pgUsageGraph')
85+
const graph: Selection<SVGGElement, unknown, HTMLElement, unknown> =
86+
select('g#pgUsageGraph')
87+
8688
if (graphData.graphMode == 'month' || graphData.graphMode == 'year') {
8789
drawBarGraph(graph)
8890
} else {
@@ -190,7 +192,7 @@ const yAxisGenerator = computed(() => {
190192
(d == 0 ? '' : Math.round(d * 10) / 10).toLocaleString(undefined),
191193
)
192194
})
193-
function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
195+
function drawGraph(graph: Selection<SVGGElement, unknown, HTMLElement, never>) {
194196
const area0 = area()
195197
.x((d, i) => xScale.value(graphData.data[i].date))
196198
.y(yScale.value(0))
@@ -203,7 +205,8 @@ function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
203205
if (globalConfig.showAnimations) {
204206
if (animateUsageGraph) {
205207
graph.selectAll('*').remove()
206-
paths = graph
208+
const canvas = graph.append('svg').attr('x', 0).attr('width', props.width)
209+
paths = canvas
207210
.selectAll('.usageareas')
208211
.data(stackedSeries.value as [number, number][][])
209212
.enter()
@@ -219,7 +222,8 @@ function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
219222
usageGraphIsInitialized()
220223
} else {
221224
graph.selectAll('*').remove()
222-
graph
225+
const canvas = graph.append('svg').attr('x', 0).attr('width', props.width)
226+
canvas
223227
.selectAll('.usageareas')
224228
225229
.data(stackedSeries.value as [number, number][][])
@@ -230,7 +234,8 @@ function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
230234
}
231235
} else {
232236
graph.selectAll('*').remove()
233-
graph
237+
const canvas = graph.append('svg').attr('x', 0).attr('width', props.width)
238+
canvas
234239
.selectAll('.usageareas')
235240
.data(stackedSeries.value as [number, number][][])
236241
.enter()
@@ -239,7 +244,9 @@ function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
239244
.attr('fill', (d, i: number) => colors[keysToUse.value[i]])
240245
}
241246
}
242-
function drawBarGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
247+
function drawBarGraph(
248+
graph: Selection<SVGGElement, unknown, HTMLElement, never>,
249+
) {
243250
if (animateUsageGraph) {
244251
graph.selectAll('*').remove()
245252
rects = graph

‎packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue‎

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,49 @@
11
<template>
2-
<g :transform="'translate(' + margin.left + ',' + margin.top + ')'">
2+
<svg x="0" :width="props.width">
33
<g
4-
id="PGXAxis"
5-
class="axis"
6-
:origin="drawAxis1"
7-
:origin2="autozoom"
8-
:transform="'translate(0,' + (height / 2 - 6) + ')'"
9-
/>
10-
<g
11-
id="PGXAxis2"
12-
class="axis"
13-
:origin="drawAxis2"
14-
:transform="'translate(0,' + (height / 2 + 10) + ')'"
15-
/>
16-
<g v-if="globalConfig.showGrid">
17-
<rect
18-
x="0"
19-
y="0"
20-
:width="width"
21-
:height="height / 2 - 10"
22-
fill="none"
23-
stroke="var(--color-grid)"
24-
stroke-width="0.5"
4+
id="PgUnit"
5+
:transform="'translate(' + 0 + ',' + (height / 2 + 9) + ')'"
6+
></g>
7+
</svg>
8+
<svg :x="props.margin.left" :width="props.width">
9+
<g :transform="'translate(' + margin.left + ',' + margin.top + ')'">
10+
<g
11+
id="PGXAxis"
12+
class="axis"
13+
:origin="drawAxis1"
14+
:origin2="autozoom"
15+
:transform="'translate(0,' + (height / 2 - 6) + ')'"
2516
/>
26-
</g>
27-
<g v-if="globalConfig.showGrid">
28-
<rect
29-
x="0"
30-
:y="height / 2 + 10"
31-
:width="width"
32-
:height="height / 2 - 10"
33-
fill="none"
34-
stroke="var(--color-grid)"
35-
stroke-width="0.5"
17+
<g
18+
id="PGXAxis2"
19+
class="axis"
20+
:origin="drawAxis2"
21+
:transform="'translate(0,' + (height / 2 + 10) + ')'"
3622
/>
23+
<g v-if="globalConfig.showGrid">
24+
<rect
25+
x="0"
26+
y="0"
27+
:width="width"
28+
:height="height / 2 - 10"
29+
fill="none"
30+
stroke="var(--color-grid)"
31+
stroke-width="0.5"
32+
/>
33+
</g>
34+
<g v-if="globalConfig.showGrid">
35+
<rect
36+
x="0"
37+
:y="height / 2 + 10"
38+
:width="width"
39+
:height="height / 2 - 10"
40+
fill="none"
41+
stroke="var(--color-grid)"
42+
stroke-width="0.5"
43+
/>
44+
</g>
3745
</g>
38-
</g>
46+
</svg>
3947
</template>
4048

4149
<script setup lang="ts">
@@ -90,7 +98,9 @@ const ticksize = computed(() => {
9098
9199
const drawAxis1 = computed(() => {
92100
let axis = select<AxisContainerElement, number>('g#PGXAxis')
101+
let unit = select('g#PgUnit')
93102
axis.selectAll('*').remove()
103+
unit.selectAll('*').remove()
94104
if (graphData.graphMode == 'month' || graphData.graphMode == 'year') {
95105
axis.call(xAxisGeneratorMonth.value)
96106
} else {
@@ -116,9 +126,9 @@ const drawAxis1 = computed(() => {
116126
axis.selectAll('.tick line').attr('stroke', 'var(--color-bg)')
117127
}
118128
axis.select('.domain').attr('stroke', 'var(--color-bg)')
119-
axis
129+
unit
120130
.append('text')
121-
.attr('x', -props.margin.left)
131+
.attr('x', 0)
122132
.attr('y', 12)
123133
.attr('fill', 'var(--color-axis)')
124134
.attr('font-size', fontsize)

‎packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,16 @@
2626
</div>
2727
</template>
2828

29-
<figure v-show="graphData.data.length > 0" id="powergraph" class="p-0 m-0">
30-
<svg id="powergraph" :viewBox="'0 0 ' + width + ' ' + height">
29+
<figure
30+
v-show="graphData.data.length > 0"
31+
id="powergraphFigure"
32+
class="p-0 m-0"
33+
>
34+
<svg
35+
id="powergraph"
36+
class="powergraphSvg"
37+
:viewBox="'0 0 ' + width + ' ' + height"
38+
>
3139
<!-- Draw the source graph -->
3240
<PgSourceGraph
3341
:width="width - margin.left - 2 * margin.right"
@@ -44,7 +52,6 @@
4452
:width="width - margin.left - 2 * margin.right"
4553
:height="height - margin.top - margin.bottom"
4654
:margin="margin"
47-
:graph-data="graphData"
4855
/>
4956
<g :transform="'translate(' + margin.left + ',' + margin.top + ')'">
5057
<PgSoc

‎packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,9 @@
8181
Math.round(vehicles[topVehicles[0]].soc) +
8282
'%'
8383
"
84-
:labelcolor="chargepoints[0].color"
84+
:labelcolor="
85+
chargepoints[0] ? chargepoints[0].color : 'var(--color-charging)'
86+
"
8587
:anchor="'start'"
8688
:config="globalConfig"
8789
/>

‎packages/modules/web_themes/colors/source/src/views/ColorsTheme.vue‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,7 @@ Hagen */
1111
<ButtonBar v-if="globalConfig.showButtonBar" />
1212

1313
<!-- Main Widgets -->
14-
<div v-if="false" class="row py-0 px-0 m-0">
15-
<PowerMeter />
16-
<PowerGraph />
17-
<EnergyMeter />
18-
<ChargePointList id="0" :compact="globalConfig.shortCpList == 'always'" />
19-
<GlobalPriceChart id="Hidden" />
20-
<VehicleList />
21-
<CounterList />
22-
</div>
23-
<div v-if="true" class="row py-0 px-0 m-0">
14+
<div class="row py-0 px-0 m-0">
2415
<CarouselFix>
2516
<template #item1>
2617
<PowerMeter />
@@ -283,7 +274,6 @@ import {
283274
screensize,
284275
} from '@/assets/js/themeConfig'
285276
import { initGraph } from '@/components/powerGraph/model'
286-
287277
// state
288278
const showMQ = ref(false)
289279
const showSH = computed(() => {

packages/modules/web_themes/colors/web/assets/index-BPb-wTT5.css renamed to packages/modules/web_themes/colors/web/assets/index-BM5jgL8d.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/modules/web_themes/colors/web/assets/index-Bpw8XWwo.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)