@mozaic-ds/chart 0.1.0-beta.22 → 0.1.0-beta.25
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/README.md +1 -1
- package/dist/mozaic-chart.js +202 -178
- package/dist/mozaic-chart.umd.cjs +6 -6
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/bar/BarChart.vue +2 -0
- package/src/components/bubble/BubbleChart.vue +17 -7
- package/src/components/line/LineChart.stories.ts +24 -0
- package/src/components/line/LineChart.vue +16 -0
- package/src/components/mixed/MixedBarLineChart.vue +3 -1
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.container[data-v-
|
|
1
|
+
.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.container[data-v-aaa6e255]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-aaa6e255]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-b0907849]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-b0907849]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-a3d5cf61]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-a3d5cf61]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-e38e3f99]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-e38e3f99]{display:flex;flex-direction:column;justify-content:center;align-items:center}.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.container[data-v-6a9cb065]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-6a9cb065]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__input{font-family:LeroyMerlin,sans-serif;font-weight:400;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #666666;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#46a610;border-color:#46a610;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#46a610;border-color:#46a610}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#035010}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#035010}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.container[data-v-a786496d]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-a786496d]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.chart-legend[data-v-a786496d]{display:flex;gap:4px;font-size:14px;align-items:center;margin:1.375rem 1.0625rem;color:#666}.bubble-icon[data-v-a786496d]{width:16px;height:16px}
|
package/package.json
CHANGED
|
@@ -203,13 +203,23 @@ const normalizeDatasets = function (dataSets: Array<Array<any>>) {
|
|
|
203
203
|
const rMin = bubbleDataProps.bubbleMin
|
|
204
204
|
|
|
205
205
|
return dataSets.map((dataSerie: Array<any>) => {
|
|
206
|
-
|
|
207
|
-
return {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
206
|
+
if (max === min) {
|
|
207
|
+
return dataSerie.map((item) => {
|
|
208
|
+
return {
|
|
209
|
+
x: item.x,
|
|
210
|
+
y: item.y,
|
|
211
|
+
r: rMin + (rMax - rMin) / 2
|
|
212
|
+
}
|
|
213
|
+
})
|
|
214
|
+
} else {
|
|
215
|
+
return dataSerie.map((item) => {
|
|
216
|
+
return {
|
|
217
|
+
x: item.x,
|
|
218
|
+
y: item.y,
|
|
219
|
+
r: rMin + (item.r - min) * (rMax - rMin) / (max - min)
|
|
220
|
+
}
|
|
221
|
+
})
|
|
222
|
+
}
|
|
213
223
|
})
|
|
214
224
|
}
|
|
215
225
|
|
|
@@ -59,3 +59,27 @@ export const MultipleData = {
|
|
|
59
59
|
],
|
|
60
60
|
},
|
|
61
61
|
} satisfies Story;
|
|
62
|
+
|
|
63
|
+
export const LineChartWithSuggestedMinAndSuggestedMax = {
|
|
64
|
+
args: {
|
|
65
|
+
width: "600px",
|
|
66
|
+
height: "400px",
|
|
67
|
+
labels: ["Data One", "Data Two", "Data Three"],
|
|
68
|
+
lines: [
|
|
69
|
+
{
|
|
70
|
+
label: "Data One",
|
|
71
|
+
data: [20, 34, 11],
|
|
72
|
+
unit: "€",
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
label: "Data Two",
|
|
76
|
+
data: [45, 28, 35],
|
|
77
|
+
unit: "€",
|
|
78
|
+
},
|
|
79
|
+
],
|
|
80
|
+
xAxisTitle: 'X Axis Title',
|
|
81
|
+
yAxisTitle: 'Y Axis Title',
|
|
82
|
+
suggestedMin: 0,
|
|
83
|
+
suggestedMax: 50
|
|
84
|
+
},
|
|
85
|
+
} satisfies Story;
|
|
@@ -154,6 +154,20 @@ const lineDataProps = defineProps({
|
|
|
154
154
|
type: String,
|
|
155
155
|
default: null,
|
|
156
156
|
},
|
|
157
|
+
/**
|
|
158
|
+
* Adjustment used when calculating the minimum data value.
|
|
159
|
+
*/
|
|
160
|
+
suggestedMin: {
|
|
161
|
+
type: Number,
|
|
162
|
+
default: undefined,
|
|
163
|
+
},
|
|
164
|
+
/**
|
|
165
|
+
* Adjustment used when calculating the maximum data value.
|
|
166
|
+
*/
|
|
167
|
+
suggestedMax: {
|
|
168
|
+
type: Number,
|
|
169
|
+
default: undefined,
|
|
170
|
+
},
|
|
157
171
|
/**
|
|
158
172
|
* Add custom CSS classes to the <canvas> element
|
|
159
173
|
*/
|
|
@@ -327,6 +341,8 @@ const options = computed(() => ({
|
|
|
327
341
|
display: lineDataProps.yAxisTitle !== null,
|
|
328
342
|
text: lineDataProps.yAxisTitle
|
|
329
343
|
},
|
|
344
|
+
suggestedMin: lineDataProps.suggestedMin,
|
|
345
|
+
suggestedMax: lineDataProps.suggestedMax,
|
|
330
346
|
position: 'left' as const,
|
|
331
347
|
grid: {
|
|
332
348
|
drawOnChartArea: true,
|
|
@@ -287,9 +287,11 @@ const getChartLabels = () => {
|
|
|
287
287
|
};
|
|
288
288
|
|
|
289
289
|
const options = computed(() => ({
|
|
290
|
-
type: '
|
|
290
|
+
type: 'bar',
|
|
291
291
|
responsive: true,
|
|
292
292
|
maintainAspectRatio: true,
|
|
293
|
+
maxBarThickness: 64,
|
|
294
|
+
categoryPercentage: 0.6,
|
|
293
295
|
elements: {
|
|
294
296
|
bar: {
|
|
295
297
|
borderSkipped: false,
|