@mozaic-ds/chart 0.1.0-beta.13 → 0.1.0-beta.15
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/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-fae6dcc9]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-fae6dcc9]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9f73f105]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9f73f105]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-d99146c4]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-d99146c4]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.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-fae6dcc9]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-fae6dcc9]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9f73f105]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9f73f105]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-d99146c4]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-d99146c4]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-a28617e3]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-a28617e3]{display:flex;flex-direction:column;justify-content:center;align-items:center}.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-758cd368]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-758cd368]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}
|
package/package.json
CHANGED
|
@@ -26,7 +26,7 @@ import {
|
|
|
26
26
|
} from '../../services/GenericTooltipService';
|
|
27
27
|
import { formatWithThousandsSeprators } from '../../services/FormatUtilities';
|
|
28
28
|
import { TooltipChartType } from '../../types/TooltipChartType';
|
|
29
|
-
import { drawLabels } from '../../services/RadarChartFunctions';
|
|
29
|
+
import { drawLabels, splitLabelIfTooLong } from '../../services/RadarChartFunctions';
|
|
30
30
|
import type { Chart, ChartItem } from '../../services/ChartsCommonLegend';
|
|
31
31
|
import { addAlpha } from '../../services/ColorFunctions';
|
|
32
32
|
import {
|
|
@@ -262,24 +262,7 @@ const chartOptions: any = {
|
|
|
262
262
|
};
|
|
263
263
|
const legendContainer = ref(null);
|
|
264
264
|
const selectMode = ref(false);
|
|
265
|
-
|
|
266
|
-
const radarLimitLabelLength = 9;
|
|
267
|
-
if (
|
|
268
|
-
axisLabel.length > radarLimitLabelLength &&
|
|
269
|
-
axisLabel.includes(' ', radarLimitLabelLength)
|
|
270
|
-
) {
|
|
271
|
-
const indexOfFirstSpaceAfterLimit: number = axisLabel.indexOf(
|
|
272
|
-
' ',
|
|
273
|
-
radarLimitLabelLength
|
|
274
|
-
);
|
|
275
|
-
return [
|
|
276
|
-
axisLabel.substring(0, indexOfFirstSpaceAfterLimit),
|
|
277
|
-
axisLabel.substring(indexOfFirstSpaceAfterLimit),
|
|
278
|
-
buildValue,
|
|
279
|
-
];
|
|
280
|
-
}
|
|
281
|
-
return [axisLabel, buildValue];
|
|
282
|
-
}
|
|
265
|
+
|
|
283
266
|
const getRadarLabels = () => {
|
|
284
267
|
return radarComponentChartProps.labels.map((label: string, index: number) => {
|
|
285
268
|
const buildValue = radarComponentChartProps.datasets[0].areaData[index]
|
|
@@ -73,7 +73,7 @@ export default function () {
|
|
|
73
73
|
liContent = createLegendElementWithPatterns(
|
|
74
74
|
item,
|
|
75
75
|
chart,
|
|
76
|
-
-1,
|
|
76
|
+
{ datasetIndex: -1 },
|
|
77
77
|
disableAccessibility.value,
|
|
78
78
|
patternsColors.value,
|
|
79
79
|
patternsList.value
|
|
@@ -84,7 +84,7 @@ export default function () {
|
|
|
84
84
|
chart,
|
|
85
85
|
item,
|
|
86
86
|
selectMode,
|
|
87
|
-
-1,
|
|
87
|
+
{ datasetIndex: -1 },
|
|
88
88
|
disableAccessibility.value
|
|
89
89
|
);
|
|
90
90
|
}
|
|
@@ -122,11 +122,6 @@ export default function () {
|
|
|
122
122
|
);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
function resetOnHoverIndex() {
|
|
126
|
-
onHoverIndex.dataSetIndex = -1;
|
|
127
|
-
onHoverIndex.columnIndex = -1;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
125
|
function getMixedDatasets(
|
|
131
126
|
datasets: Dataset[],
|
|
132
127
|
disableAccessibility: boolean,
|
|
@@ -141,16 +136,17 @@ export default function () {
|
|
|
141
136
|
// Hack to force refresh
|
|
142
137
|
const borderWithValue = borderWidth.value;
|
|
143
138
|
return datasets.map((dataset, index) => {
|
|
139
|
+
const isBarChart = dataset.type === 'bar';
|
|
144
140
|
return {
|
|
145
141
|
type: dataset.type,
|
|
146
|
-
fill:
|
|
142
|
+
fill: isBarChart ? null : false,
|
|
147
143
|
borderWidth: function () {
|
|
148
|
-
return disableAccessibility ? 1 : borderWithValue;
|
|
144
|
+
return disableAccessibility && isBarChart ? 1 : borderWithValue;
|
|
149
145
|
},
|
|
150
146
|
borderColor: function (context: any) {
|
|
151
|
-
return disableAccessibility
|
|
147
|
+
return disableAccessibility && isBarChart
|
|
152
148
|
? '#00000000'
|
|
153
|
-
:
|
|
149
|
+
: isBarChart
|
|
154
150
|
? getBorderColor(
|
|
155
151
|
index,
|
|
156
152
|
context.index,
|
|
@@ -169,7 +165,7 @@ export default function () {
|
|
|
169
165
|
patternShifting
|
|
170
166
|
);
|
|
171
167
|
},
|
|
172
|
-
yAxisID:
|
|
168
|
+
yAxisID: isBarChart ? 'A' : 'B',
|
|
173
169
|
pointStyle: index % 2 === 0 ? 'rectRot' : 'circle',
|
|
174
170
|
data: dataset.data,
|
|
175
171
|
label: dataset.label,
|
|
@@ -42,7 +42,7 @@ export function drawLabels(chart: Chart, props: any) {
|
|
|
42
42
|
ctx.textAlign = 'center';
|
|
43
43
|
}
|
|
44
44
|
const yPos = position.y + (yOffset * (label.length - 1)) / 2;
|
|
45
|
-
ctx.font = '
|
|
45
|
+
ctx.font = '12px Arial';
|
|
46
46
|
|
|
47
47
|
label.forEach((text, i) => {
|
|
48
48
|
const color =
|
|
@@ -70,3 +70,22 @@ const buildColorArray = (props: any): string[] => {
|
|
|
70
70
|
}
|
|
71
71
|
});
|
|
72
72
|
};
|
|
73
|
+
|
|
74
|
+
export function splitLabelIfTooLong(axisLabel: string, buildValue: string) {
|
|
75
|
+
const radarLimitLabelLength = 7;
|
|
76
|
+
if (
|
|
77
|
+
axisLabel.length > radarLimitLabelLength &&
|
|
78
|
+
axisLabel.includes(' ', radarLimitLabelLength)
|
|
79
|
+
) {
|
|
80
|
+
const indexOfFirstSpaceAfterLimit: number = axisLabel.indexOf(
|
|
81
|
+
' ',
|
|
82
|
+
radarLimitLabelLength
|
|
83
|
+
);
|
|
84
|
+
return [
|
|
85
|
+
axisLabel.substring(0, indexOfFirstSpaceAfterLimit),
|
|
86
|
+
axisLabel.substring(indexOfFirstSpaceAfterLimit),
|
|
87
|
+
buildValue,
|
|
88
|
+
];
|
|
89
|
+
}
|
|
90
|
+
return [axisLabel, buildValue];
|
|
91
|
+
}
|