@mozaic-ds/chart 0.1.0-beta.14 → 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]
|
|
@@ -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
|
+
}
|