@cfasim-ui/docs 0.3.18 → 0.4.0

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.
Files changed (18) hide show
  1. package/charts/BarChart/BarChart.md +189 -0
  2. package/charts/BarChart/BarChart.vue +829 -0
  3. package/charts/LineChart/LineChart.vue +68 -288
  4. package/charts/_shared/axes.ts +69 -0
  5. package/charts/_shared/computeTicks.ts +42 -0
  6. package/charts/_shared/index.ts +20 -0
  7. package/charts/_shared/seriesCsv.ts +68 -0
  8. package/charts/_shared/useChartMenu.ts +72 -0
  9. package/charts/_shared/useChartPadding.ts +37 -0
  10. package/charts/_shared/useChartSize.ts +49 -0
  11. package/charts/_shared/useChartTooltip.ts +152 -0
  12. package/charts/index.ts +5 -0
  13. package/index.json +18 -1
  14. package/package.json +1 -1
  15. package/pyodide/index.ts +2 -0
  16. package/pyodide/pyodide.worker.ts +109 -72
  17. package/pyodide/pyodideWorkerApi.ts +157 -63
  18. package/pyodide/useModel.ts +10 -21
package/charts/BarChart/BarChart.md ADDED
@@ -0,0 +1,189 @@
1
+ # BarChart
2
+
3
+ A responsive SVG bar chart supporting single, grouped, and stacked series in
4
+ either vertical (column) or horizontal orientation. Shares axis, tooltip,
5
+ menu, and CSV export wiring with [`LineChart`](./line-chart).
6
+
7
+ ## Examples
8
+
9
+ ### Single series
10
+
11
+ <ComponentDemo>
12
+ <BarChart
13
+ :data="[12, 19, 7, 24, 16]"
14
+ :categories="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
15
+ :height="220"
16
+ x-label="Day"
17
+ y-label="Cases"
18
+ tooltip-trigger="hover"
19
+ />
20
+
21
+ <template #code>
22
+
23
+ ```vue
24
+ <BarChart
25
+ :data="[12, 19, 7, 24, 16]"
26
+ :categories="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
27
+ :height="220"
28
+ x-label="Day"
29
+ y-label="Cases"
30
+ tooltip-trigger="hover"
31
+ />
32
+ ```
33
+
34
+ </template>
35
+ </ComponentDemo>
36
+
37
+ ### Grouped series
38
+
39
+ <ComponentDemo>
40
+ <BarChart
41
+ :series="[
42
+ { data: [10, 14, 9, 18], legend: 'Pediatric', color: '#0057b7' },
43
+ { data: [22, 28, 19, 30], legend: 'Adult', color: '#f4a261' },
44
+ ]"
45
+ :categories="['Q1', 'Q2', 'Q3', 'Q4']"
46
+ :height="220"
47
+ y-label="Doses (thousands)"
48
+ tooltip-trigger="hover"
49
+ />
50
+
51
+ <template #code>
52
+
53
+ ```vue
54
+ <BarChart
55
+ :series="[
56
+ { data: [10, 14, 9, 18], legend: 'Pediatric', color: '#0057b7' },
57
+ { data: [22, 28, 19, 30], legend: 'Adult', color: '#f4a261' },
58
+ ]"
59
+ :categories="['Q1', 'Q2', 'Q3', 'Q4']"
60
+ :height="220"
61
+ y-label="Doses (thousands)"
62
+ tooltip-trigger="hover"
63
+ />
64
+ ```
65
+
66
+ </template>
67
+ </ComponentDemo>
68
+
69
+ ### Stacked series
70
+
71
+ <ComponentDemo>
72
+ <BarChart
73
+ :series="[
74
+ { data: [10, 14, 9, 18], legend: 'Pediatric', color: '#0057b7' },
75
+ { data: [22, 28, 19, 30], legend: 'Adult', color: '#f4a261' },
76
+ ]"
77
+ :categories="['Q1', 'Q2', 'Q3', 'Q4']"
78
+ layout="stacked"
79
+ :height="220"
80
+ y-label="Doses (thousands)"
81
+ tooltip-trigger="hover"
82
+ />
83
+
84
+ <template #code>
85
+
86
+ ```vue
87
+ <BarChart
88
+ :series="[
89
+ { data: [10, 14, 9, 18], legend: 'Pediatric', color: '#0057b7' },
90
+ { data: [22, 28, 19, 30], legend: 'Adult', color: '#f4a261' },
91
+ ]"
92
+ :categories="['Q1', 'Q2', 'Q3', 'Q4']"
93
+ layout="stacked"
94
+ :height="220"
95
+ y-label="Doses (thousands)"
96
+ tooltip-trigger="hover"
97
+ />
98
+ ```
99
+
100
+ </template>
101
+ </ComponentDemo>
102
+
103
+ ### Horizontal orientation
104
+
105
+ <ComponentDemo>
106
+ <BarChart
107
+ :data="[42, 31, 18, 12, 7]"
108
+ :categories="['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon']"
109
+ orientation="horizontal"
110
+ :height="220"
111
+ x-label="Cases"
112
+ tooltip-trigger="hover"
113
+ />
114
+
115
+ <template #code>
116
+
117
+ ```vue
118
+ <BarChart
119
+ :data="[42, 31, 18, 12, 7]"
120
+ :categories="['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon']"
121
+ orientation="horizontal"
122
+ :height="220"
123
+ x-label="Cases"
124
+ tooltip-trigger="hover"
125
+ />
126
+ ```
127
+
128
+ </template>
129
+ </ComponentDemo>
130
+
131
+ ### Custom value tick format
132
+
133
+ <ComponentDemo>
134
+ <BarChart
135
+ :data="[0.12, 0.34, 0.56, 0.78]"
136
+ :categories="['A', 'B', 'C', 'D']"
137
+ :value-tick-format="(v) => `${(v * 100).toFixed(0)}%`"
138
+ :height="220"
139
+ y-label="Coverage"
140
+ />
141
+
142
+ <template #code>
143
+
144
+ ```vue
145
+ <BarChart
146
+ :data="[0.12, 0.34, 0.56, 0.78]"
147
+ :categories="['A', 'B', 'C', 'D']"
148
+ :value-tick-format="(v) => `${(v * 100).toFixed(0)}%`"
149
+ :height="220"
150
+ y-label="Coverage"
151
+ />
152
+ ```
153
+
154
+ </template>
155
+ </ComponentDemo>
156
+
157
+ ## API
158
+
159
+ ## Props
160
+
161
+ | Prop | Type | Required | Default |
162
+ |------|------|----------|---------|
163
+ | `data` | `BarChartData` | No | — |
164
+ | `y` | `BarChartData` | No | — |
165
+ | `series` | `BarSeries[]` | No | — |
166
+ | `categories` | `readonly string[]` | No | — |
167
+ | `orientation` | `"vertical" \| "horizontal"` | No | `"vertical"` |
168
+ | `layout` | `"grouped" \| "stacked"` | No | `"grouped"` |
169
+ | `width` | `number` | No | — |
170
+ | `height` | `number` | No | — |
171
+ | `title` | `string` | No | — |
172
+ | `xLabel` | `string` | No | — |
173
+ | `yLabel` | `string` | No | — |
174
+ | `valueMin` | `number` | No | `0` |
175
+ | `valueTicks` | `number \| number[]` | No | — |
176
+ | `valueTickFormat` | `(value: number) =&gt; string` | No | — |
177
+ | `categoryFormat` | `(label: string, index: number) =&gt; string` | No | — |
178
+ | `barPadding` | `number` | No | `0.2` |
179
+ | `groupGap` | `number` | No | `1` |
180
+ | `debounce` | `number` | No | — |
181
+ | `menu` | `boolean \| string` | No | `true` |
182
+ | `valueGrid` | `boolean` | No | `true` |
183
+ | `tooltipData` | `unknown[]` | No | — |
184
+ | `tooltipTrigger` | `"hover" \| "click"` | No | — |
185
+ | `tooltipClamp` | `"none" \| "chart" \| "window"` | No | `"chart"` |
186
+ | `csv` | `string \| (() =&gt; string)` | No | — |
187
+ | `filename` | `string` | No | — |
188
+ | `downloadLink` | `boolean \| string` | No | — |
189
+