OrgTJWater/next-tjwater-drainage-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: improve SCADA analysis visibility

Browse Source
This commit is contained in:
jiang
2026-07-21 10:17:26 +08:00
parent 21791b9cee
commit caf06a8a82
3 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/workbench/map/scada-analysis.test.ts
+9 -9
View File
@@ -15,25 +15,25 @@ describe("SCADA analysis overlay", () => {
const indicator = scadaAnalysisLayers.find((layer) => layer.id === SCADA_ANALYSIS_LAYER_IDS.indicator); const indicator = scadaAnalysisLayers.find((layer) => layer.id === SCADA_ANALYSIS_LAYER_IDS.indicator);
const label = scadaAnalysisLayers.find((layer) => layer.id === SCADA_ANALYSIS_LAYER_IDS.label); const label = scadaAnalysisLayers.find((layer) => layer.id === SCADA_ANALYSIS_LAYER_IDS.label);
expect(SCADA_ANALYSIS_LEVEL_COLORS).toEqual({ expect(SCADA_ANALYSIS_LEVEL_COLORS).toEqual({
high: "#DC2626", high: "#F43F5E",
medium: "#F59E0B", medium: "#F59E0B",
low: "#16A34A", low: "#10B981",
unrated: "#7C3AED" unrated: "#8B5CF6"
}); });
expect(casing).toMatchObject({ expect(casing).toMatchObject({
type: "circle", type: "circle",
paint: { "circle-radius": 16, "circle-stroke-color": "#FFFFFF", "circle-stroke-width": 7 } paint: { "circle-radius": 20, "circle-stroke-color": "#FFFFFF", "circle-stroke-width": 8 }
}); });
expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.high); expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.high);
expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.medium); expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.medium);
expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.low); expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.low);
expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.unrated); expect(JSON.stringify(level)).toContain(SCADA_ANALYSIS_LEVEL_COLORS.unrated);
expect(level).toMatchObject({ paint: { "circle-stroke-width": 4 } }); expect(level).toMatchObject({ paint: { "circle-radius": 20, "circle-stroke-width": 5 } });
expect(indicator).toMatchObject({ expect(indicator).toMatchObject({
type: "circle", type: "circle",
paint: { paint: {
"circle-radius": 5, "circle-radius": 6,
"circle-translate": [11, -11], "circle-translate": [14, -14],
"circle-stroke-color": "#FFFFFF", "circle-stroke-color": "#FFFFFF",
"circle-stroke-width": 2 "circle-stroke-width": 2
} }
@@ -43,11 +43,11 @@ describe("SCADA analysis overlay", () => {
layout: { layout: {
"symbol-sort-key": ["get", "sort_priority"], "symbol-sort-key": ["get", "sort_priority"],
"text-field": ["get", "analysis_label"], "text-field": ["get", "analysis_label"],
"text-size": 15, "text-size": 18,
"text-font": ["Noto Sans Regular"], "text-font": ["Noto Sans Regular"],
"text-allow-overlap": false "text-allow-overlap": false
}, },
paint: { "text-halo-color": "#FFFFFF", "text-halo-width": 3, "text-halo-blur": 0.5 } paint: { "text-halo-color": "#FFFFFF", "text-halo-width": 4, "text-halo-blur": 0.5 }
}); });
expect(JSON.stringify(label)).toContain("#991B1B"); expect(JSON.stringify(label)).toContain("#991B1B");
expect(JSON.stringify(label)).toContain("#92400E"); expect(JSON.stringify(label)).toContain("#92400E");
features/workbench/map/scada-analysis.ts
+12 -12
View File
@@ -21,10 +21,10 @@ export type ScadaAnalysisRenderResult = {
}; };
export const SCADA_ANALYSIS_LEVEL_COLORS: Record<ScadaAnalysisLevel, string> = { export const SCADA_ANALYSIS_LEVEL_COLORS: Record<ScadaAnalysisLevel, string> = {
high: "#DC2626", high: "#F43F5E",
medium: "#F59E0B", medium: "#F59E0B",
low: "#16A34A", low: "#10B981",
unrated: "#7C3AED" unrated: "#8B5CF6"
}; };
const SCADA_ANALYSIS_LABEL_COLORS: Record<ScadaAnalysisLevel, string> = { const SCADA_ANALYSIS_LABEL_COLORS: Record<ScadaAnalysisLevel, string> = {
@@ -67,10 +67,10 @@ export const scadaAnalysisLayers: Layer[] = [
type: "circle", type: "circle",
source: SCADA_ANALYSIS_SOURCE_ID, source: SCADA_ANALYSIS_SOURCE_ID,
paint: { paint: {
"circle-radius": 16, "circle-radius": 20,
"circle-color": "rgba(255,255,255,0)", "circle-color": "rgba(255,255,255,0)",
"circle-stroke-color": "#FFFFFF", "circle-stroke-color": "#FFFFFF",
"circle-stroke-width": 7 "circle-stroke-width": 8
} }
}, },
{ {
@@ -78,10 +78,10 @@ export const scadaAnalysisLayers: Layer[] = [
type: "circle", type: "circle",
source: SCADA_ANALYSIS_SOURCE_ID, source: SCADA_ANALYSIS_SOURCE_ID,
paint: { paint: {
"circle-radius": 16, "circle-radius": 20,
"circle-color": "rgba(255,255,255,0)", "circle-color": "rgba(255,255,255,0)",
"circle-stroke-color": levelColorExpression(SCADA_ANALYSIS_LEVEL_COLORS), "circle-stroke-color": levelColorExpression(SCADA_ANALYSIS_LEVEL_COLORS),
"circle-stroke-width": 4 "circle-stroke-width": 5
} }
}, },
{ {
@@ -89,8 +89,8 @@ export const scadaAnalysisLayers: Layer[] = [
type: "circle", type: "circle",
source: SCADA_ANALYSIS_SOURCE_ID, source: SCADA_ANALYSIS_SOURCE_ID,
paint: { paint: {
"circle-radius": 5, "circle-radius": 6,
"circle-translate": [11, -11], "circle-translate": [14, -14],
"circle-color": levelColorExpression(SCADA_ANALYSIS_LEVEL_COLORS), "circle-color": levelColorExpression(SCADA_ANALYSIS_LEVEL_COLORS),
"circle-stroke-color": "#FFFFFF", "circle-stroke-color": "#FFFFFF",
"circle-stroke-width": 2 "circle-stroke-width": 2
@@ -103,10 +103,10 @@ export const scadaAnalysisLayers: Layer[] = [
layout: { layout: {
"symbol-sort-key": ["get", "sort_priority"], "symbol-sort-key": ["get", "sort_priority"],
"text-field": ["get", "analysis_label"], "text-field": ["get", "analysis_label"],
"text-size": 15, "text-size": 18,
"text-font": ["Noto Sans Regular"], "text-font": ["Noto Sans Regular"],
"text-letter-spacing": 0.015, "text-letter-spacing": 0.015,
"text-offset": [0, -2.05], "text-offset": [0, -2.2],
"text-anchor": "bottom", "text-anchor": "bottom",
"text-allow-overlap": false, "text-allow-overlap": false,
"text-ignore-placement": false "text-ignore-placement": false
@@ -114,7 +114,7 @@ export const scadaAnalysisLayers: Layer[] = [
paint: { paint: {
"text-color": levelColorExpression(SCADA_ANALYSIS_LABEL_COLORS), "text-color": levelColorExpression(SCADA_ANALYSIS_LABEL_COLORS),
"text-halo-color": "#FFFFFF", "text-halo-color": "#FFFFFF",
"text-halo-width": 3, "text-halo-width": 4,
"text-halo-blur": 0.5 "text-halo-blur": 0.5
} }
} }
tests/browser/scada-analysis.e2e.ts
+4 -4
View File
@@ -66,17 +66,17 @@ test("frontend actions replace SCADA analysis results and remain legible at 375p
expect(rendered).toEqual({ expect(rendered).toEqual({
label: "MP02 · 低", label: "MP02 · 低",
labelLayer: "symbol", labelLayer: "symbol",
labelSize: 15, labelSize: 18,
labelFont: ["Noto Sans Regular"], labelFont: ["Noto Sans Regular"],
level: "low", level: "low",
levelLayer: "circle", levelLayer: "circle",
levelColors: [ levelColors: [
"match", "match",
["get", "analysis_level"], ["get", "analysis_level"],
"high", "#DC2626", "high", "#F43F5E",
"medium", "#F59E0B", "medium", "#F59E0B",
"low", "#16A34A", "low", "#10B981",
"#7C3AED" "#8B5CF6"
], ],
indicatorLayer: "circle" indicatorLayer: "circle"
}); });