@geotab/zenith 3.8.0 → 3.8.1

package/README.md

@@ -45,31 +45,28 @@ Now components are ready for usage.
 
 Zenith library provides components defined in Zenith Design System. It includes very basic blocks like colors, icons, font presets, atom components like buttons, checkboxes etc and high order components - header, table, filters bar etc. List of existing components can be found in [Storybook](https://developers.geotab.com/zenith-storybook/index.html).
 
-## Documentation
+## Change log
 
-- [Development Guide](docs/DEVELOPMENT.md) - Creating components, adding icons, testing, code style
-- [Build Process](docs/BUILD.md) - How the build system works
-- [Release Process](docs/RELEASE.md) - How to publish new versions of Zenith
-- [Translations](docs/TRANSLATIONS.md) - How translations work and how to manage them
+### 3.8.1
 
-## Change log
+- Fix horizontal pie chart center text scaling and legend toggle
 
 ### 3.8.0
 
-- Create FileUpload component
-- Improve Accordion component Storybook documentation
-- Improve Divider component Storybook documentation
-- Improve accessibility for DataGrid sorting
-- Create Chip component documentation
-- Update sort controls in mobile Table
-- Improve accessibility for Radio button
-- Improve accessibility for SummaryTiles
-- Accessibility updates for Dropdown, MobileSheet, ControlledPopup
+- Create `FileUpload` component
+- Improve `Accordion` component Storybook documentation
+- Improve `Divider` component Storybook documentation
+- Improve accessibility for `DataGrid` sorting
+- Create `Chip` component documentation
+- Update sort controls in mobile `Table`
+- Improve accessibility for `Radio` button
+- Improve accessibility for `SummaryTile`
+- Accessibility updates for `Dropdown`, `MobileSheet`, `ControlledPopup`
 - Add Prettier CI job to Zenith pipeline
-- SummaryTile refactor, documentation updates
+- `SummaryTile` refactor, documentation updates
 - Updated translations
 - Add multiline table header support (word wrap for long strings)
-- SidePanel outside click improvements
+- `SidePanel` outside click improvements
 
 ### 3.7.0
 

package/dist/chart/pieChart/centerTextPlugin.js

@@ -16,16 +16,23 @@ const centerTextPlugin = (centerText) => ({
         const css = (name) => getCssVar(chart.canvas, name);
         const fontFamily = css("--main-font");
         const hasLabel = !!centerText.label;
-        const valueY = hasLabel ? centerY - 14 : centerY;
+        const meta = chart.getDatasetMeta(0);
+        const controllerRadius = meta.controller.innerRadius;
+        const innerRadius = typeof controllerRadius === "number" && controllerRadius > 0 ? controllerRadius : Math.min(width, height) * 0.325;
+        const maxValueFont = parseFloat(css("--pie-center-value-font-size")) || 28;
+        const maxLabelFont = parseFloat(css("--pie-center-label-font-size")) || 14;
+        const valueFontSize = Math.max(10, Math.min(maxValueFont, innerRadius * 0.45));
+        const labelFontSize = Math.max(8, Math.min(maxLabelFont, innerRadius * 0.22));
+        const valueY = hasLabel ? centerY - valueFontSize * 0.5 : centerY;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
-        ctx.font = `${css("--pie-center-value-font-weight")} ${css("--pie-center-value-font-size")} ${fontFamily}`;
+        ctx.font = `${css("--pie-center-value-font-weight")} ${valueFontSize}px ${fontFamily}`;
         ctx.fillStyle = css("--text-primary");
         ctx.fillText(String(centerText.value), centerX, valueY);
         if (hasLabel) {
-            ctx.font = `${css("--pie-center-label-font-weight")} ${css("--pie-center-label-font-size")} ${fontFamily}`;
+            ctx.font = `${css("--pie-center-label-font-weight")} ${labelFontSize}px ${fontFamily}`;
             ctx.fillStyle = css("--text-secondary");
-            ctx.fillText(String(centerText.label), centerX, centerY + 16);
+            ctx.fillText(String(centerText.label), centerX, centerY + labelFontSize * 1.1);
         }
         ctx.restore();
     }

package/dist/chart/pieChart.js

@@ -59,7 +59,16 @@ const PieChart = (_a) => {
     }, [fontSize, dark]);
     const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
-    const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();
+    const { isHidden, toggleHidden: rawToggle } = (0, useHidden_1.useHidden)();
+    const pieData = data.datasets[0].data;
+    const toggleHidden = (0, react_1.useCallback)((index) => {
+        if (!isHidden(index)) {
+            const visibleCount = pieData.filter((_, i) => !isHidden(i)).length;
+            if (visibleCount <= 1)
+                return;
+        }
+        rawToggle(index);
+    }, [isHidden, rawToggle, pieData]);
     const chartData = (0, react_1.useMemo)(() => {
         const chData = Object.assign({}, data);
         chData.datasets = chData.datasets.map(ds => (0, getDefaultDatasetStyle_1.getDefaultDatasetStyle)(ds));

package/esm/chart/pieChart/centerTextPlugin.js

@@ -13,16 +13,23 @@ export const centerTextPlugin = (centerText) => ({
         const css = (name) => getCssVar(chart.canvas, name);
         const fontFamily = css("--main-font");
         const hasLabel = !!centerText.label;
-        const valueY = hasLabel ? centerY - 14 : centerY;
+        const meta = chart.getDatasetMeta(0);
+        const controllerRadius = meta.controller.innerRadius;
+        const innerRadius = typeof controllerRadius === "number" && controllerRadius > 0 ? controllerRadius : Math.min(width, height) * 0.325;
+        const maxValueFont = parseFloat(css("--pie-center-value-font-size")) || 28;
+        const maxLabelFont = parseFloat(css("--pie-center-label-font-size")) || 14;
+        const valueFontSize = Math.max(10, Math.min(maxValueFont, innerRadius * 0.45));
+        const labelFontSize = Math.max(8, Math.min(maxLabelFont, innerRadius * 0.22));
+        const valueY = hasLabel ? centerY - valueFontSize * 0.5 : centerY;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
-        ctx.font = `${css("--pie-center-value-font-weight")} ${css("--pie-center-value-font-size")} ${fontFamily}`;
+        ctx.font = `${css("--pie-center-value-font-weight")} ${valueFontSize}px ${fontFamily}`;
         ctx.fillStyle = css("--text-primary");
         ctx.fillText(String(centerText.value), centerX, valueY);
         if (hasLabel) {
-            ctx.font = `${css("--pie-center-label-font-weight")} ${css("--pie-center-label-font-size")} ${fontFamily}`;
+            ctx.font = `${css("--pie-center-label-font-weight")} ${labelFontSize}px ${fontFamily}`;
             ctx.fillStyle = css("--text-secondary");
-            ctx.fillText(String(centerText.label), centerX, centerY + 16);
+            ctx.fillText(String(centerText.label), centerX, centerY + labelFontSize * 1.1);
         }
         ctx.restore();
     }

package/esm/chart/pieChart.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useId, useMemo, useRef } from "react";
+import { useCallback, useContext, useEffect, useId, useMemo, useRef } from "react";
 import { Pie } from "../react-chartjs/typedCharts";
 import { Chart as ChartJS, PieController, ArcElement } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
@@ -56,7 +56,16 @@ export const PieChart = (_a) => {
     }, [fontSize, dark]);
     const defOptions = useMemo(() => getDefaultOptions(), []);
     const chartOptions = deepMerge(defOptions, options);
-    const { isHidden, toggleHidden } = useHidden();
+    const { isHidden, toggleHidden: rawToggle } = useHidden();
+    const pieData = data.datasets[0].data;
+    const toggleHidden = useCallback((index) => {
+        if (!isHidden(index)) {
+            const visibleCount = pieData.filter((_, i) => !isHidden(i)).length;
+            if (visibleCount <= 1)
+                return;
+        }
+        rawToggle(index);
+    }, [isHidden, rawToggle, pieData]);
     const chartData = useMemo(() => {
         const chData = Object.assign({}, data);
         chData.datasets = chData.datasets.map(ds => getDefaultDatasetStyle(ds));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.8.0",
+    "version": "3.8.1",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",