@geotab/zenith 3.8.0 → 3.8.1-beta.0

package/README.md

@@ -54,22 +54,26 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.8.1
+
+- 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/dist/index.js

@@ -18,7 +18,6 @@ exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = expor
 exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.isDragNotClick = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageTapToUpload = exports.ImageNothingFound = exports.ImageNoMatchingAssets = exports.ImageLooking = exports.ImageCloudUpload = exports.ImageAdjustFilter = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeMinimum = void 0;
 exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = exports.PageHeader = exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = void 0;
 exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = void 0;
-/* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
 var accordion_1 = require("./accordion/accordion");

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-beta.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",