Skip to content

Commit 4d3a4dc

Browse files
Mgetz10Mgetz10
committed
fix: gauge feedback
1 parent 62f0450 commit 4d3a4dc

File tree

4 files changed

+281
-17
lines changed

4 files changed

+281
-17
lines changed

‎packages/dashboard/src/_stories/Dashboard.stories.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import CascadingDataFilters from './_mock/filter-cascade.json'
3535
import ParentChildFilters from './_mock/parent-child-filters.json'
3636
import NestedParentChildFilters from './_mock/nested-parent-child-filters.json'
3737
import GalleryDataBiteDashboard from './_mock/gallery-data-bite-dashboard.json'
38+
import TP5TestConfig from './_mock/tp5-test.json'
3839

3940
// Dashboard Filter Updates for Ascending, Descending, and Custom Order
4041
import DashboardFilterAsc from './_mock/dashboard-filter-asc.json'
@@ -103,6 +104,13 @@ export const Example_3: Story = {
103104
}
104105
}
105106

107+
export const TP5_Test_Dashboard: Story = {
108+
args: {
109+
config: TP5TestConfig,
110+
isEditor: false
111+
}
112+
}
113+
106114
export const Bump_Chart_Dashboard: Story = {
107115
args: {
108116
config: BumpChartConfig,

‎packages/dashboard/src/_stories/_mock/tp5-test.json‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
{
2+
"type": "dashboard",
3+
"title": "TP5 Alignment Test Dashboard",
4+
"description": "Testing alignment of TP5 Waffles, Data Bites, and Gauges",
5+
"data": [
6+
{
7+
"Category": "Adults",
8+
"Vaccination Rate": "68.5",
9+
"Insured Rate": "87.2",
10+
"Screening Rate": "72.8"
11+
},
12+
{
13+
"Category": "Seniors",
14+
"Vaccination Rate": "82.3",
15+
"Insured Rate": "95.1",
16+
"Screening Rate": "84.6"
17+
},
18+
{
19+
"Category": "Youth",
20+
"Vaccination Rate": "54.2",
21+
"Insured Rate": "92.4",
22+
"Screening Rate": "65.3"
23+
}
24+
],
25+
"dashboard": {
26+
"filters": []
27+
},
28+
"rows": [
29+
[
30+
{ "width": 4, "widget": "waffle1" },
31+
{ "width": 4, "widget": "waffle2" },
32+
{ "width": 4, "widget": "waffle3" }
33+
],
34+
[
35+
{ "width": 4, "widget": "bite1" },
36+
{ "width": 4, "widget": "bite2" },
37+
{ "width": 4, "widget": "bite3" }
38+
],
39+
[
40+
{ "width": 4, "widget": "gauge1" },
41+
{ "width": 4, "widget": "gauge2" },
42+
{ "width": 4, "widget": "gauge3" }
43+
]
44+
],
45+
"visualizations": {
46+
"waffle1": {
47+
"uid": "waffle1",
48+
"type": "waffle-chart",
49+
"title": "Vaccination Coverage",
50+
"visualizationType": "TP5 Waffle",
51+
"visualizationSubType": "linear",
52+
"showPercent": true,
53+
"showDenominator": false,
54+
"valueDescription": "",
55+
"content": "of the population is vaccinated against seasonal flu",
56+
"subtext": "Based on 2024 CDC surveillance data across all age groups",
57+
"dataColumn": "Vaccination Rate",
58+
"dataFunction": "Mean (Average)",
59+
"customDenom": false,
60+
"dataDenom": "100",
61+
"suffix": "%",
62+
"roundToPlace": "1",
63+
"theme": "theme-blue",
64+
"shape": "square",
65+
"visual": {
66+
"whiteBackground": false
67+
},
68+
"showTitle": true,
69+
"overallFontSize": "medium"
70+
},
71+
"waffle2": {
72+
"uid": "waffle2",
73+
"type": "waffle-chart",
74+
"title": "Health Insurance Coverage Rate",
75+
"visualizationType": "TP5 Waffle",
76+
"visualizationSubType": "linear",
77+
"showPercent": true,
78+
"showDenominator": false,
79+
"valueDescription": "",
80+
"content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
81+
"subtext": "",
82+
"dataColumn": "Insured Rate",
83+
"dataFunction": "Mean (Average)",
84+
"customDenom": false,
85+
"dataDenom": "100",
86+
"suffix": "%",
87+
"roundToPlace": "1",
88+
"theme": "theme-teal",
89+
"shape": "person",
90+
"visual": {
91+
"whiteBackground": false
92+
},
93+
"showTitle": true,
94+
"overallFontSize": "medium"
95+
},
96+
"waffle3": {
97+
"uid": "waffle3",
98+
"type": "waffle-chart",
99+
"title": "Cancer Screening Completion",
100+
"visualizationType": "TP5 Waffle",
101+
"visualizationSubType": "linear",
102+
"showPercent": true,
103+
"showDenominator": false,
104+
"valueDescription": "",
105+
"content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
106+
"subtext": "Data from National Health Interview Survey 2024",
107+
"dataColumn": "Screening Rate",
108+
"dataFunction": "Mean (Average)",
109+
"customDenom": false,
110+
"dataDenom": "100",
111+
"suffix": "%",
112+
"roundToPlace": "1",
113+
"theme": "theme-purple",
114+
"shape": "circle",
115+
"visual": {
116+
"whiteBackground": false
117+
},
118+
"showTitle": true,
119+
"overallFontSize": "medium"
120+
},
121+
"gauge1": {
122+
"uid": "gauge1",
123+
"type": "waffle-chart",
124+
"title": "Vaccination Coverage",
125+
"visualizationType": "TP5 Gauge",
126+
"visualizationSubType": "linear",
127+
"showPercent": true,
128+
"showDenominator": false,
129+
"valueDescription": "",
130+
"content": "of the population is vaccinated against seasonal flu",
131+
"subtext": "Based on 2024 CDC surveillance data across all age groups",
132+
"dataColumn": "Vaccination Rate",
133+
"dataFunction": "Mean (Average)",
134+
"customDenom": false,
135+
"dataDenom": "100",
136+
"suffix": "%",
137+
"roundToPlace": "1",
138+
"theme": "theme-blue",
139+
"gauge": {
140+
"height": 35,
141+
"width": "100%"
142+
},
143+
"visual": {
144+
"whiteBackground": false
145+
},
146+
"showTitle": true,
147+
"overallFontSize": "medium"
148+
},
149+
"gauge2": {
150+
"uid": "gauge2",
151+
"type": "waffle-chart",
152+
"title": "Health Insurance Coverage Rate",
153+
"visualizationType": "TP5 Gauge",
154+
"visualizationSubType": "linear",
155+
"showPercent": true,
156+
"showDenominator": false,
157+
"valueDescription": "",
158+
"content": "",
159+
"subtext": "",
160+
"dataColumn": "Insured Rate",
161+
"dataFunction": "Mean (Average)",
162+
"customDenom": false,
163+
"dataDenom": "100",
164+
"suffix": "%",
165+
"roundToPlace": "1",
166+
"theme": "theme-teal",
167+
"gauge": {
168+
"height": 35,
169+
"width": "100%"
170+
},
171+
"visual": {
172+
"whiteBackground": false
173+
},
174+
"showTitle": true,
175+
"overallFontSize": "medium"
176+
},
177+
"gauge3": {
178+
"uid": "gauge3",
179+
"type": "waffle-chart",
180+
"title": "Cancer Screening Completion",
181+
"visualizationType": "TP5 Gauge",
182+
"visualizationSubType": "linear",
183+
"showPercent": true,
184+
"showDenominator": false,
185+
"valueDescription": "",
186+
"content": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
187+
"subtext": "Data from National Health Interview Survey 2024",
188+
"dataColumn": "Screening Rate",
189+
"dataFunction": "Mean (Average)",
190+
"customDenom": false,
191+
"dataDenom": "100",
192+
"suffix": "%",
193+
"roundToPlace": "1",
194+
"theme": "theme-purple",
195+
"gauge": {
196+
"height": 35,
197+
"width": "100%"
198+
},
199+
"visual": {
200+
"whiteBackground": false
201+
},
202+
"showTitle": true,
203+
"overallFontSize": "medium"
204+
},
205+
"bite1": {
206+
"uid": "bite1",
207+
"type": "data-bite",
208+
"title": "Vaccination Coverage",
209+
"biteStyle": "tp5",
210+
"dataColumn": "Vaccination Rate",
211+
"dataFunction": "Mean (Average)",
212+
"biteBody": "of the population is vaccinated against seasonal flu",
213+
"subtext": "Based on 2024 CDC surveillance data across all age groups",
214+
"dataFormat": {
215+
"roundToPlace": 1,
216+
"commas": true,
217+
"prefix": "",
218+
"suffix": "%"
219+
},
220+
"theme": "theme-blue",
221+
"visual": {
222+
"hideBackgroundColor": false
223+
}
224+
},
225+
"bite2": {
226+
"uid": "bite2",
227+
"type": "data-bite",
228+
"title": "Health Insurance Coverage Rate",
229+
"biteStyle": "tp5",
230+
"dataColumn": "Insured Rate",
231+
"dataFunction": "Mean (Average)",
232+
"biteBody": "",
233+
"subtext": "",
234+
"dataFormat": {
235+
"roundToPlace": 1,
236+
"commas": true,
237+
"prefix": "",
238+
"suffix": "%"
239+
},
240+
"theme": "theme-teal",
241+
"visual": {
242+
"hideBackgroundColor": false
243+
}
244+
},
245+
"bite3": {
246+
"uid": "bite3",
247+
"type": "data-bite",
248+
"title": "Cancer Screening Completion",
249+
"biteStyle": "tp5",
250+
"dataColumn": "Screening Rate",
251+
"dataFunction": "Mean (Average)",
252+
"biteBody": "completed recommended cancer screenings including mammography, colonoscopy, and cervical cancer screening",
253+
"subtext": "Data from National Health Interview Survey 2024",
254+
"dataFormat": {
255+
"roundToPlace": 1,
256+
"commas": true,
257+
"prefix": "",
258+
"suffix": "%"
259+
},
260+
"theme": "theme-purple",
261+
"visual": {
262+
"hideBackgroundColor": false
263+
}
264+
}
265+
}
266+
}
267+

‎packages/waffle-chart/src/CdcWaffleChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -597,7 +597,7 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
597597
}
598598

599599
return (
600-
<div className='cove-component__content p-0 border-0'>
600+
<div className='cove-component__content border-0'>
601601
<div className={calloutClasses.join(' ')}>
602602
{!config.visual?.whiteBackground && (
603603
<img src={CalloutFlag} alt='' className='cdc-callout__flag' aria-hidden='true' />

‎packages/waffle-chart/src/components/EditorPanel.jsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,6 @@ const EditorPanel = memo(props => {
7171
updateField={updateField}
7272
options={approvedWaffleChartOptions}
7373
/>
74-
{(config.visualizationType === 'Gauge' || config.visualizationType === 'TP5 Gauge') && (
75-
<Select
76-
value={config.visualizationSubType}
77-
fieldName='visualizationSubType'
78-
label='Chart Subtype'
79-
updateField={updateField}
80-
options={['Linear']}
81-
/>
82-
)}
8374
<TextField
8475
value={config.title}
8576
fieldName='title'
@@ -345,19 +336,16 @@ const EditorPanel = memo(props => {
345336
Add Filter
346337
</Button>
347338
</Accordion.Section>
348-
<Accordion.Section title='Chart Settings'>
349-
{config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 Gauge' && (
339+
{config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 Gauge' && (
340+
<Accordion.Section title='Chart Settings'>
350341
<Select
351342
value={config.shape}
352343
fieldName='shape'
353344
label='Shape'
354345
updateField={updateField}
355346
options={['circle', 'square', 'person']}
356347
/>
357-
)}
358-
{config.visualizationType !== 'Gauge' &&
359-
config.visualizationType !== 'TP5 Waffle' &&
360-
config.visualizationType !== 'TP5 Gauge' && (
348+
{config.visualizationType !== 'TP5 Waffle' && (
361349
<>
362350
<div
363351
className='cove-accordion__panel-row cove-accordion__small-inputs'
@@ -408,7 +396,8 @@ const EditorPanel = memo(props => {
408396
</div>
409397
</>
410398
)}
411-
</Accordion.Section>
399+
</Accordion.Section>
400+
)}
412401

413402
{/* Visual section for TP5 style */}
414403
{(config.visualizationType === 'TP5 Waffle' || config.visualizationType === 'TP5 Gauge') && (

0 commit comments

Comments
 (0)