andoncloud-metrics-pie-chart-widget 1.2.6 → 1.2.7
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/index.d.ts +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -23,7 +23,7 @@ declare const getDisplayName: (lang: string) => string;
|
|
|
23
23
|
declare const getTitle: (data: WidgetData | undefined, settings: WidgetSettings | undefined, _filters: FilterValues | undefined, lang: string) => string;
|
|
24
24
|
//#endregion
|
|
25
25
|
//#region src/version.d.ts
|
|
26
|
-
declare const LIBRARY_VERSION = "1.2.
|
|
26
|
+
declare const LIBRARY_VERSION = "1.2.7";
|
|
27
27
|
//#endregion
|
|
28
28
|
//#region src/index.d.ts
|
|
29
29
|
declare const thumbnail: string | undefined;
|
package/dist/index.js
CHANGED
|
@@ -51,7 +51,7 @@ const resources = {
|
|
|
51
51
|
};
|
|
52
52
|
//#endregion
|
|
53
53
|
//#region src/version.ts
|
|
54
|
-
const LIBRARY_VERSION = "1.2.
|
|
54
|
+
const LIBRARY_VERSION = "1.2.7";
|
|
55
55
|
//#endregion
|
|
56
56
|
//#region src/components/SettingsFormContent/index.tsx
|
|
57
57
|
const SettingsFormContent = ({ data, formProps }) => {
|
|
@@ -309,7 +309,8 @@ const getTitle = (data, settings, _filters, lang) => {
|
|
|
309
309
|
if (!workplace) return name;
|
|
310
310
|
const metricCount = settings.metricIds?.length ?? 0;
|
|
311
311
|
if (metricCount === 0) return `${name} — ${workplace.name}`;
|
|
312
|
-
|
|
312
|
+
const maxLen = 30;
|
|
313
|
+
return `${name} — ${workplace.name.length > maxLen ? `${workplace.name.slice(0, maxLen)}…` : workplace.name}, ${t("titleMetrics", lang, { count: metricCount })}`;
|
|
313
314
|
};
|
|
314
315
|
//#endregion
|
|
315
316
|
//#region src/index.tsx
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["en","pl","locales","locales"],"sources":["../src/locales/en/translation.json","../src/locales/pl/translation.json","../src/locales/index.ts","../src/version.ts","../src/components/SettingsFormContent/index.tsx","../src/components/MetricsPieChart/index.tsx","../src/components/WidgetView/index.tsx","../src/components/Widget/utils.ts","../src/components/Widget/index.tsx","../src/core/title.ts","../src/index.tsx"],"sourcesContent":["","","import en from './en/translation.json';\nimport pl from './pl/translation.json';\n\nconst resources = {\n en: {\n translation: en,\n },\n pl: {\n translation: pl,\n },\n};\n\nexport default resources;\n","export const LIBRARY_VERSION = '1.2.6';\n","import { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { TabContext, TabList, TabPanel } from '@mui/lab';\nimport { FormControl, InputLabel, MenuItem, Select, Tab, TextField } from '@mui/material';\nimport { SortableSelect } from 'andoncloud-dashboard-toolkit';\nimport { SettingsFormContentProps } from 'andoncloud-widget-base';\n\nimport { WidgetData, WidgetSettings } from '@/types';\n\nconst SettingsFormContent: React.FC<SettingsFormContentProps<WidgetData, WidgetSettings>> = ({ data, formProps }) => {\n // -- Local state --\n const [selectedTab, setSelectedTab] = useState('workplace');\n\n // -- Translation --\n const { t } = useTranslation();\n\n return (\n <TabContext value={selectedTab}>\n <TabList onChange={(_, value) => setSelectedTab(value)} centered>\n <Tab label={t('metricsPieChartWidget.workplace')} value=\"workplace\" />\n <Tab label={t('metricsPieChartWidget.metrics')} value=\"metrics\" />\n <Tab label={t('metricsPieChartWidget.advanced')} value=\"advanced\" />\n </TabList>\n\n <TabPanel value=\"workplace\">\n <FormControl fullWidth>\n <InputLabel id=\"workplace-select-label\">{t('metricsPieChartWidget.chooseWorkplace')}</InputLabel>\n <Select\n name=\"workplaceId\"\n labelId=\"workplace-select-label\"\n value={formProps.values.workplaceId || ''}\n onChange={formProps.handleChange}\n fullWidth\n >\n {data.workplaces?.map((workplace) => (\n <MenuItem key={workplace.id} value={workplace.id}>\n {workplace.name}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n </TabPanel>\n\n <TabPanel value=\"metrics\">\n <SortableSelect\n placeholder={`${t('metricsPieChartWidget.selectAndArrangeTheOrder')}...`}\n options={data.metrics?.map(({ id, name }) => ({ label: name, value: id }))}\n selected={formProps.values.metricIds}\n onChange={(selected) => formProps.setFieldValue('metricIds', [...selected])}\n />\n </TabPanel>\n\n <TabPanel value=\"advanced\">\n <TextField\n name=\"customTitle\"\n label={t('metricsPieChartWidget.customTitle')}\n value={formProps.values.customTitle}\n onChange={formProps.handleChange}\n fullWidth\n />\n </TabPanel>\n </TabContext>\n );\n};\n\nexport default SettingsFormContent;\n","import { ComputedDatum, ResponsivePie } from '@nivo/pie';\nimport { BasicTooltip } from '@nivo/tooltip';\nimport { ListMetrics_Metric, ListMetricValues_MetricValue, MetricUnitEnum } from 'andoncloud-dashboard-toolkit';\nimport dayjs from 'dayjs';\nimport duration from 'dayjs/plugin/duration';\n\ndayjs.extend(duration);\n\ninterface MetricsPieChartProps {\n metrics?: ListMetrics_Metric[];\n metricsValues?: ListMetricValues_MetricValue[];\n}\n\nconst MetricsPieChart: React.FC<MetricsPieChartProps> = ({ metrics, metricsValues }) => {\n const getMetricLabel = (metricId: string) => {\n return metrics?.find((metric) => metric.id === metricId)?.name || '';\n };\n const formatFloat = (value: number) => value.toFixed(1).replace('.', ',');\n const formatValue = (value: string, unit?: string | null) => {\n if (value && unit) {\n switch (unit) {\n case MetricUnitEnum.Duration:\n return dayjs.duration(parseFloat(value), 'seconds').format('m[m] s[s]');\n case MetricUnitEnum.Round:\n return formatFloat(parseFloat(value));\n case MetricUnitEnum.Percent:\n return `${formatFloat(parseFloat(value) * 100)}%`;\n default:\n return value.toString();\n }\n }\n return '';\n };\n const getArcLabelText = (datum: ComputedDatum<unknown>) => {\n const metricData = datum.data as Partial<ListMetricValues_MetricValue>;\n\n return formatValue(metricData.textValue || '', metricData.unit);\n };\n\n const MetricTooltip = <RawDatum,>({ datum }: { datum: ComputedDatum<RawDatum> }) => {\n const metricData = datum.data as Partial<ListMetricValues_MetricValue>;\n\n return (\n <BasicTooltip\n id={datum.id}\n value={formatValue(metricData.textValue || '', metricData.unit)}\n enableChip={true}\n color={datum.color}\n />\n );\n };\n\n return (\n <ResponsivePie\n theme={{\n legends: {\n text: { fill: '#FFFFFF' },\n },\n }}\n data={(metricsValues || []).map(({ metricId, textValue, unit }) => ({\n id: getMetricLabel(metricId),\n label: getMetricLabel(metricId),\n value: textValue,\n textValue,\n unit,\n }))}\n innerRadius={0.5}\n margin={{ top: 20, right: 0, bottom: 20, left: 220 }}\n enableArcLinkLabels={false}\n arcLabel={getArcLabelText}\n tooltip={MetricTooltip}\n defs={[\n {\n id: 'lines',\n type: 'patternLines',\n background: 'inherit',\n color: 'rgba(0, 0, 0, 0.01)',\n rotation: -45,\n lineWidth: 5,\n spacing: 10,\n },\n ]}\n fill={[{ match: '*', id: 'lines' }]}\n legends={[\n {\n anchor: 'left',\n direction: 'column',\n translateX: -180,\n itemWidth: 200,\n itemHeight: 20,\n symbolShape: 'circle',\n },\n ]}\n />\n );\n};\n\nexport default MetricsPieChart;\n","import { WidgetViewProps } from '@/types';\n\nimport MetricsPieChart from '../MetricsPieChart';\n\nconst WidgetView: React.FC<WidgetViewProps> = ({ data }) => {\n return <MetricsPieChart metrics={data?.metrics} metricsValues={data?.metricsValues} />;\n};\n\nexport default WidgetView;\n","import { TFunction } from 'i18next';\nimport * as yup from 'yup';\n\nexport const getSettingsFormProps = (t: TFunction) => {\n yup.setLocale({\n mixed: {\n required: t('metricsPieChartWidget.thisFieldIsRequired'),\n },\n });\n return {\n initialValues: {\n customTitle: '',\n workplaceId: '',\n metricIds: [],\n },\n validationSchema: yup.object({\n workplaceId: yup.string().required(),\n metricIds: yup.array().of(yup.string().required()),\n }),\n };\n};\n","import { useCallback, useEffect, useState } from 'react';\n\nimport { useGqlClients, WidgetProps } from 'andoncloud-dashboard-toolkit';\nimport { BaseWidget } from 'andoncloud-widget-base';\n\nimport locales from '@/locales';\nimport { WidgetData, WidgetSettings } from '@/types';\nimport { LIBRARY_VERSION } from '@/version';\n\nimport SettingsFormContent from '../SettingsFormContent';\nimport WidgetView from '../WidgetView';\n\nimport { getSettingsFormProps } from './utils';\n\nconst Widget: React.FC<WidgetProps<WidgetData, WidgetSettings>> = ({\n url,\n wsUrl,\n lang,\n data,\n settings,\n ...widgetProps\n}) => {\n const { graphqlSdk, gqlWsClient } = useGqlClients({ url, wsUrl, lang });\n const [widgetData, setWidgetData] = useState<WidgetData | undefined>(data);\n const [widgetSettings, setWidgetSettings] = useState<WidgetSettings | undefined>(settings);\n\n useEffect(() => {\n if (graphqlSdk) {\n if (!data) {\n graphqlSdk\n .listWorkplaces()\n .then(({ workplaces }) => {\n return setWidgetData((current: WidgetData) => ({\n ...(current || {}),\n workplaces,\n }));\n })\n .catch(() => {});\n\n graphqlSdk\n .listMetrics()\n .then(({ metrics }) => {\n return setWidgetData((current: WidgetData) => ({\n ...(current || {}),\n metrics,\n }));\n })\n .catch(() => {});\n }\n if (widgetSettings) {\n const { workplaceId, metricIds } = widgetSettings;\n\n const fetchMetricValues = async () => {\n if (workplaceId && metricIds) {\n graphqlSdk\n .listMetricValues({ workplaceIds: [workplaceId], metricIds })\n .then(({ metricValues }) => {\n return setWidgetData((current: WidgetData) => ({\n ...(current || {}),\n metricsValues: metricValues.filter(\n (metricValue) =>\n metricValue.workplaceId === workplaceId && metricIds.includes(metricValue.metricId),\n ),\n }));\n })\n .catch(() => {});\n }\n };\n fetchMetricValues();\n\n const intervalId = setInterval(() => {\n fetchMetricValues();\n }, 10_000);\n\n return () => {\n clearInterval(intervalId);\n };\n }\n }\n return () => {};\n }, [data, graphqlSdk, widgetSettings]);\n\n const handleSettingsChange = useCallback(\n (settings: WidgetSettings) => {\n setWidgetSettings({ ...settings });\n },\n [setWidgetSettings],\n );\n\n return (\n <BaseWidget\n {...widgetProps}\n lang={lang}\n locales={locales}\n data={widgetData}\n settings={settings}\n gqlClients={{ graphqlSdk, gqlWsClient }}\n onSettingsChange={handleSettingsChange}\n WidgetView={WidgetView}\n getSettingsFormProps={getSettingsFormProps}\n SettingsFormContent={SettingsFormContent}\n version={LIBRARY_VERSION}\n data-testid=\"metrics-pie-chart-widget\"\n />\n );\n};\n\nexport default Widget;\n","import type { FilterValues } from 'andoncloud-dashboard-toolkit';\nimport i18n from 'i18next';\n\nimport type { WidgetData, WidgetSettings } from '../types';\n\nconst ns = 'metricsPieChartWidget';\n\nconst t = (key: string, lng: string, options?: Record<string, unknown>) => i18n.t(`${ns}.${key}`, { lng, ...options });\n\nexport const getDisplayName = (lang: string) => t('displayName', lang);\n\nexport const getTitle = (\n data: WidgetData | undefined,\n settings: WidgetSettings | undefined,\n _filters: FilterValues | undefined,\n lang: string,\n): string => {\n const name = getDisplayName(lang);\n\n if (!settings?.workplaceId || !data?.workplaces?.length) return name;\n\n const workplace = data.workplaces.find((w) => w.id === settings.workplaceId);\n if (!workplace) return name;\n\n const metricCount = settings.metricIds?.length ?? 0;\n if (metricCount === 0) return `${name} — ${workplace.name}`;\n\n return `${name} — ${workplace.name}, ${t('titleMetrics', lang, { count: metricCount })}`;\n};\n","import { registerTranslations } from 'andoncloud-sdk';\n\nimport locales from './locales';\n\nregisterTranslations(locales);\n\nexport { default as Widget } from './components/Widget';\nexport { getDisplayName, getTitle } from './core/title';\n\nexport const thumbnail: string | undefined = undefined;\n\nexport const requiredFeatures: string[] = ['feature.metrics-pie-chart-widget'];\nexport const extraPermissions: string[] = [];\n\nexport { LIBRARY_VERSION as version } from './version';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["en","pl","locales","locales"],"sources":["../src/locales/en/translation.json","../src/locales/pl/translation.json","../src/locales/index.ts","../src/version.ts","../src/components/SettingsFormContent/index.tsx","../src/components/MetricsPieChart/index.tsx","../src/components/WidgetView/index.tsx","../src/components/Widget/utils.ts","../src/components/Widget/index.tsx","../src/core/title.ts","../src/index.tsx"],"sourcesContent":["","","import en from './en/translation.json';\nimport pl from './pl/translation.json';\n\nconst resources = {\n en: {\n translation: en,\n },\n pl: {\n translation: pl,\n },\n};\n\nexport default resources;\n","export const LIBRARY_VERSION = '1.2.7';\n","import { useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { TabContext, TabList, TabPanel } from '@mui/lab';\nimport { FormControl, InputLabel, MenuItem, Select, Tab, TextField } from '@mui/material';\nimport { SortableSelect } from 'andoncloud-dashboard-toolkit';\nimport { SettingsFormContentProps } from 'andoncloud-widget-base';\n\nimport { WidgetData, WidgetSettings } from '@/types';\n\nconst SettingsFormContent: React.FC<SettingsFormContentProps<WidgetData, WidgetSettings>> = ({ data, formProps }) => {\n // -- Local state --\n const [selectedTab, setSelectedTab] = useState('workplace');\n\n // -- Translation --\n const { t } = useTranslation();\n\n return (\n <TabContext value={selectedTab}>\n <TabList onChange={(_, value) => setSelectedTab(value)} centered>\n <Tab label={t('metricsPieChartWidget.workplace')} value=\"workplace\" />\n <Tab label={t('metricsPieChartWidget.metrics')} value=\"metrics\" />\n <Tab label={t('metricsPieChartWidget.advanced')} value=\"advanced\" />\n </TabList>\n\n <TabPanel value=\"workplace\">\n <FormControl fullWidth>\n <InputLabel id=\"workplace-select-label\">{t('metricsPieChartWidget.chooseWorkplace')}</InputLabel>\n <Select\n name=\"workplaceId\"\n labelId=\"workplace-select-label\"\n value={formProps.values.workplaceId || ''}\n onChange={formProps.handleChange}\n fullWidth\n >\n {data.workplaces?.map((workplace) => (\n <MenuItem key={workplace.id} value={workplace.id}>\n {workplace.name}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n </TabPanel>\n\n <TabPanel value=\"metrics\">\n <SortableSelect\n placeholder={`${t('metricsPieChartWidget.selectAndArrangeTheOrder')}...`}\n options={data.metrics?.map(({ id, name }) => ({ label: name, value: id }))}\n selected={formProps.values.metricIds}\n onChange={(selected) => formProps.setFieldValue('metricIds', [...selected])}\n />\n </TabPanel>\n\n <TabPanel value=\"advanced\">\n <TextField\n name=\"customTitle\"\n label={t('metricsPieChartWidget.customTitle')}\n value={formProps.values.customTitle}\n onChange={formProps.handleChange}\n fullWidth\n />\n </TabPanel>\n </TabContext>\n );\n};\n\nexport default SettingsFormContent;\n","import { ComputedDatum, ResponsivePie } from '@nivo/pie';\nimport { BasicTooltip } from '@nivo/tooltip';\nimport { ListMetrics_Metric, ListMetricValues_MetricValue, MetricUnitEnum } from 'andoncloud-dashboard-toolkit';\nimport dayjs from 'dayjs';\nimport duration from 'dayjs/plugin/duration';\n\ndayjs.extend(duration);\n\ninterface MetricsPieChartProps {\n metrics?: ListMetrics_Metric[];\n metricsValues?: ListMetricValues_MetricValue[];\n}\n\nconst MetricsPieChart: React.FC<MetricsPieChartProps> = ({ metrics, metricsValues }) => {\n const getMetricLabel = (metricId: string) => {\n return metrics?.find((metric) => metric.id === metricId)?.name || '';\n };\n const formatFloat = (value: number) => value.toFixed(1).replace('.', ',');\n const formatValue = (value: string, unit?: string | null) => {\n if (value && unit) {\n switch (unit) {\n case MetricUnitEnum.Duration:\n return dayjs.duration(parseFloat(value), 'seconds').format('m[m] s[s]');\n case MetricUnitEnum.Round:\n return formatFloat(parseFloat(value));\n case MetricUnitEnum.Percent:\n return `${formatFloat(parseFloat(value) * 100)}%`;\n default:\n return value.toString();\n }\n }\n return '';\n };\n const getArcLabelText = (datum: ComputedDatum<unknown>) => {\n const metricData = datum.data as Partial<ListMetricValues_MetricValue>;\n\n return formatValue(metricData.textValue || '', metricData.unit);\n };\n\n const MetricTooltip = <RawDatum,>({ datum }: { datum: ComputedDatum<RawDatum> }) => {\n const metricData = datum.data as Partial<ListMetricValues_MetricValue>;\n\n return (\n <BasicTooltip\n id={datum.id}\n value={formatValue(metricData.textValue || '', metricData.unit)}\n enableChip={true}\n color={datum.color}\n />\n );\n };\n\n return (\n <ResponsivePie\n theme={{\n legends: {\n text: { fill: '#FFFFFF' },\n },\n }}\n data={(metricsValues || []).map(({ metricId, textValue, unit }) => ({\n id: getMetricLabel(metricId),\n label: getMetricLabel(metricId),\n value: textValue,\n textValue,\n unit,\n }))}\n innerRadius={0.5}\n margin={{ top: 20, right: 0, bottom: 20, left: 220 }}\n enableArcLinkLabels={false}\n arcLabel={getArcLabelText}\n tooltip={MetricTooltip}\n defs={[\n {\n id: 'lines',\n type: 'patternLines',\n background: 'inherit',\n color: 'rgba(0, 0, 0, 0.01)',\n rotation: -45,\n lineWidth: 5,\n spacing: 10,\n },\n ]}\n fill={[{ match: '*', id: 'lines' }]}\n legends={[\n {\n anchor: 'left',\n direction: 'column',\n translateX: -180,\n itemWidth: 200,\n itemHeight: 20,\n symbolShape: 'circle',\n },\n ]}\n />\n );\n};\n\nexport default MetricsPieChart;\n","import { WidgetViewProps } from '@/types';\n\nimport MetricsPieChart from '../MetricsPieChart';\n\nconst WidgetView: React.FC<WidgetViewProps> = ({ data }) => {\n return <MetricsPieChart metrics={data?.metrics} metricsValues={data?.metricsValues} />;\n};\n\nexport default WidgetView;\n","import { TFunction } from 'i18next';\nimport * as yup from 'yup';\n\nexport const getSettingsFormProps = (t: TFunction) => {\n yup.setLocale({\n mixed: {\n required: t('metricsPieChartWidget.thisFieldIsRequired'),\n },\n });\n return {\n initialValues: {\n customTitle: '',\n workplaceId: '',\n metricIds: [],\n },\n validationSchema: yup.object({\n workplaceId: yup.string().required(),\n metricIds: yup.array().of(yup.string().required()),\n }),\n };\n};\n","import { useCallback, useEffect, useState } from 'react';\n\nimport { useGqlClients, WidgetProps } from 'andoncloud-dashboard-toolkit';\nimport { BaseWidget } from 'andoncloud-widget-base';\n\nimport locales from '@/locales';\nimport { WidgetData, WidgetSettings } from '@/types';\nimport { LIBRARY_VERSION } from '@/version';\n\nimport SettingsFormContent from '../SettingsFormContent';\nimport WidgetView from '../WidgetView';\n\nimport { getSettingsFormProps } from './utils';\n\nconst Widget: React.FC<WidgetProps<WidgetData, WidgetSettings>> = ({\n url,\n wsUrl,\n lang,\n data,\n settings,\n ...widgetProps\n}) => {\n const { graphqlSdk, gqlWsClient } = useGqlClients({ url, wsUrl, lang });\n const [widgetData, setWidgetData] = useState<WidgetData | undefined>(data);\n const [widgetSettings, setWidgetSettings] = useState<WidgetSettings | undefined>(settings);\n\n useEffect(() => {\n if (graphqlSdk) {\n if (!data) {\n graphqlSdk\n .listWorkplaces()\n .then(({ workplaces }) => {\n return setWidgetData((current: WidgetData) => ({\n ...(current || {}),\n workplaces,\n }));\n })\n .catch(() => {});\n\n graphqlSdk\n .listMetrics()\n .then(({ metrics }) => {\n return setWidgetData((current: WidgetData) => ({\n ...(current || {}),\n metrics,\n }));\n })\n .catch(() => {});\n }\n if (widgetSettings) {\n const { workplaceId, metricIds } = widgetSettings;\n\n const fetchMetricValues = async () => {\n if (workplaceId && metricIds) {\n graphqlSdk\n .listMetricValues({ workplaceIds: [workplaceId], metricIds })\n .then(({ metricValues }) => {\n return setWidgetData((current: WidgetData) => ({\n ...(current || {}),\n metricsValues: metricValues.filter(\n (metricValue) =>\n metricValue.workplaceId === workplaceId && metricIds.includes(metricValue.metricId),\n ),\n }));\n })\n .catch(() => {});\n }\n };\n fetchMetricValues();\n\n const intervalId = setInterval(() => {\n fetchMetricValues();\n }, 10_000);\n\n return () => {\n clearInterval(intervalId);\n };\n }\n }\n return () => {};\n }, [data, graphqlSdk, widgetSettings]);\n\n const handleSettingsChange = useCallback(\n (settings: WidgetSettings) => {\n setWidgetSettings({ ...settings });\n },\n [setWidgetSettings],\n );\n\n return (\n <BaseWidget\n {...widgetProps}\n lang={lang}\n locales={locales}\n data={widgetData}\n settings={settings}\n gqlClients={{ graphqlSdk, gqlWsClient }}\n onSettingsChange={handleSettingsChange}\n WidgetView={WidgetView}\n getSettingsFormProps={getSettingsFormProps}\n SettingsFormContent={SettingsFormContent}\n version={LIBRARY_VERSION}\n data-testid=\"metrics-pie-chart-widget\"\n />\n );\n};\n\nexport default Widget;\n","import type { FilterValues } from 'andoncloud-dashboard-toolkit';\nimport i18n from 'i18next';\n\nimport type { WidgetData, WidgetSettings } from '../types';\n\nconst ns = 'metricsPieChartWidget';\n\nconst t = (key: string, lng: string, options?: Record<string, unknown>) => i18n.t(`${ns}.${key}`, { lng, ...options });\n\nexport const getDisplayName = (lang: string) => t('displayName', lang);\n\nexport const getTitle = (\n data: WidgetData | undefined,\n settings: WidgetSettings | undefined,\n _filters: FilterValues | undefined,\n lang: string,\n): string => {\n const name = getDisplayName(lang);\n\n if (!settings?.workplaceId || !data?.workplaces?.length) return name;\n\n const workplace = data.workplaces.find((w) => w.id === settings.workplaceId);\n if (!workplace) return name;\n\n const metricCount = settings.metricIds?.length ?? 0;\n if (metricCount === 0) return `${name} — ${workplace.name}`;\n\n const maxLen = 30;\n const wpName = workplace.name.length > maxLen ? `${workplace.name.slice(0, maxLen)}…` : workplace.name;\n\n return `${name} — ${wpName}, ${t('titleMetrics', lang, { count: metricCount })}`;\n};\n","import { registerTranslations } from 'andoncloud-sdk';\n\nimport locales from './locales';\n\nregisterTranslations(locales);\n\nexport { default as Widget } from './components/Widget';\nexport { getDisplayName, getTitle } from './core/title';\n\nexport const thumbnail: string | undefined = undefined;\n\nexport const requiredFeatures: string[] = ['feature.metrics-pie-chart-widget'];\nexport const extraPermissions: string[] = [];\n\nexport { LIBRARY_VERSION as version } from './version';\n"],"mappings":"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"}
|