@cdc/waffle-chart 4.25.10 → 4.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdcwafflechart.js +9025 -8034
- package/examples/tp5-style-white.json +72 -0
- package/examples/tp5-style.json +72 -0
- package/examples/tp5-waffle.json +123 -0
- package/index.html +3 -6
- package/package.json +5 -5
- package/src/CdcWaffleChart.tsx +165 -119
- package/src/_stories/WaffleChart.Editor.stories.tsx +45 -54
- package/src/_stories/WaffleChart.stories.tsx +46 -1
- package/src/components/EditorPanel.jsx +179 -356
- package/src/images/callout-flag.svg +7 -0
- package/src/scss/main.scss +2 -12
- package/src/scss/waffle-chart.scss +91 -23
- package/src/store/chart.reducer.ts +1 -1
- package/src/test/CdcWaffleChart.test.jsx +1 -1
- package/src/types/Config.ts +4 -2
- package/LICENSE +0 -201
|
@@ -75,12 +75,29 @@ export const Person: Story = {
|
|
|
75
75
|
showDenominator: false,
|
|
76
76
|
showPercent: true,
|
|
77
77
|
valueDescription: 'testing',
|
|
78
|
+
gauge: {
|
|
79
|
+
height: 35,
|
|
80
|
+
width: 400
|
|
81
|
+
},
|
|
78
82
|
visual: {
|
|
79
83
|
border: true,
|
|
80
84
|
accent: true,
|
|
81
85
|
background: true,
|
|
82
86
|
hideBackgroundColor: true,
|
|
83
|
-
borderColorTheme: true
|
|
87
|
+
borderColorTheme: true,
|
|
88
|
+
colors: {
|
|
89
|
+
'theme-blue': '#005eaa',
|
|
90
|
+
'theme-purple': '#712177',
|
|
91
|
+
'theme-brown': '#705043',
|
|
92
|
+
'theme-teal': '#00695c',
|
|
93
|
+
'theme-pink': '#af4448',
|
|
94
|
+
'theme-orange': '#bb4d00',
|
|
95
|
+
'theme-slate': '#29434e',
|
|
96
|
+
'theme-indigo': '#26418f',
|
|
97
|
+
'theme-cyan': '#006778',
|
|
98
|
+
'theme-green': '#4b830d',
|
|
99
|
+
'theme-amber': '#fbab18'
|
|
100
|
+
}
|
|
84
101
|
}
|
|
85
102
|
}
|
|
86
103
|
},
|
|
@@ -172,4 +189,32 @@ export const Gauge: Story = {
|
|
|
172
189
|
)
|
|
173
190
|
}
|
|
174
191
|
|
|
192
|
+
export const Waffle_Chart_TP5_Style: Story = {
|
|
193
|
+
args: {
|
|
194
|
+
configUrl: '/packages/waffle-chart/examples/tp5-style.json'
|
|
195
|
+
},
|
|
196
|
+
parameters: {
|
|
197
|
+
docs: {
|
|
198
|
+
description: {
|
|
199
|
+
story:
|
|
200
|
+
'TP5 Style - A new layout style that displays the waffle chart in a callout component with a blue background and icon. The title appears inside the callout header. This style mimics the CDC Template Package 5.0 callout component design and includes an optional white background variant.'
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
export const Waffle_Chart_TP5_Style_White_Background: Story = {
|
|
207
|
+
args: {
|
|
208
|
+
configUrl: '/packages/waffle-chart/examples/tp5-style-white.json'
|
|
209
|
+
},
|
|
210
|
+
parameters: {
|
|
211
|
+
docs: {
|
|
212
|
+
description: {
|
|
213
|
+
story:
|
|
214
|
+
'TP5 Style with White Background - The white background variant of the TP5 style features a white background with a teal border instead of the default blue background. The icon remains visible in this variant.'
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
175
220
|
export default meta
|