@perses-dev/pie-chart-plugin 0.6.0

package/lib/palette-gen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-gen.d.ts","sourceRoot":"","sources":["../../src/palette-gen.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAGnE,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAgC9D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAI/E;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAUhH;AAKD,wBAAgB,4BAA4B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAExE"}

package/lib/palette-gen.js

@@ -0,0 +1,62 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { getConsistentColor } from './palette';
+/**
+ * Get line color as well as color for tooltip and legend, account for whether palette is 'categorical' or 'auto' aka generative
+ */ export function getSeriesColor(props) {
+    const { categoricalPalette, visual, muiPrimaryColor, seriesName, seriesIndex, querySettings, queryHasMultipleResults } = props;
+    // Use color overrides defined in query settings in priority, if applicable
+    if (querySettings) {
+        if (querySettings.colorMode === 'fixed') {
+            return querySettings.colorValue;
+        } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults) {
+            return querySettings.colorValue;
+        }
+    }
+    // Fallback is unlikely to set unless echarts theme palette in charts theme provider is undefined.
+    const fallbackColor = Array.isArray(categoricalPalette) && categoricalPalette[0] ? categoricalPalette[0] // Needed since echarts color property isn't always an array.
+     : muiPrimaryColor;
+    // Explicit way to always cycle through classical palette instead of changing when based on number of series.
+    if (visual.palette?.mode === 'categorical') {
+        return getCategoricalPaletteColor(categoricalPalette, seriesIndex, fallbackColor);
+    }
+    return getAutoPaletteColor(seriesName, fallbackColor);
+}
+/**
+ * Get color from generative color palette, this approaches uses series name as the seed and
+ * allows for consistent colors across panels (when all panels use this approach).
+ */ export function getAutoPaletteColor(name, fallbackColor) {
+    // corresponds to 'Auto' in palette.kind for generative color palette
+    const generatedColor = getConsistentSeriesNameColor(name);
+    return generatedColor ?? fallbackColor;
+}
+/**
+ * Default classical qualitative palette that cycles through the colors array by index.
+ */ export function getCategoricalPaletteColor(palette, seriesIndex, fallbackColor) {
+    if (palette === undefined) {
+        return fallbackColor;
+    }
+    // Loop through predefined static color palette
+    const paletteTotalColors = palette.length ?? 1;
+    const paletteIndex = seriesIndex % paletteTotalColors;
+    // fallback color comes from echarts theme
+    const seriesColor = palette[paletteIndex] ?? fallbackColor;
+    return seriesColor;
+}
+/*
+ * Generate a consistent series name color (if series name includes 'error', it will have a red hue).
+ */ export function getConsistentSeriesNameColor(inputString) {
+    return getConsistentColor(inputString, inputString.toLowerCase().includes('error'));
+}
+
+//# sourceMappingURL=palette-gen.js.map

package/lib/palette-gen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/palette-gen.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ChartVisualOptions, QuerySettingsOptions } from './model';\nimport { getConsistentColor } from './palette';\n\nexport interface SeriesColorProps {\n  categoricalPalette: string[];\n  visual: ChartVisualOptions;\n  muiPrimaryColor: string;\n  seriesName: string;\n  seriesIndex: number;\n  querySettings?: QuerySettingsOptions;\n  queryHasMultipleResults?: boolean;\n}\n\n/**\n * Get line color as well as color for tooltip and legend, account for whether palette is 'categorical' or 'auto' aka generative\n */\nexport function getSeriesColor(props: SeriesColorProps): string {\n  const {\n    categoricalPalette,\n    visual,\n    muiPrimaryColor,\n    seriesName,\n    seriesIndex,\n    querySettings,\n    queryHasMultipleResults,\n  } = props;\n\n  // Use color overrides defined in query settings in priority, if applicable\n  if (querySettings) {\n    if (querySettings.colorMode === 'fixed') {\n      return querySettings.colorValue;\n    } else if (querySettings.colorMode === 'fixed-single' && !queryHasMultipleResults) {\n      return querySettings.colorValue;\n    }\n  }\n\n  // Fallback is unlikely to set unless echarts theme palette in charts theme provider is undefined.\n  const fallbackColor =\n    Array.isArray(categoricalPalette) && categoricalPalette[0]\n      ? (categoricalPalette[0] as string) // Needed since echarts color property isn't always an array.\n      : muiPrimaryColor;\n\n  // Explicit way to always cycle through classical palette instead of changing when based on number of series.\n  if (visual.palette?.mode === 'categorical') {\n    return getCategoricalPaletteColor(categoricalPalette, seriesIndex, fallbackColor);\n  }\n\n  return getAutoPaletteColor(seriesName, fallbackColor);\n}\n\n/**\n * Get color from generative color palette, this approaches uses series name as the seed and\n * allows for consistent colors across panels (when all panels use this approach).\n */\nexport function getAutoPaletteColor(name: string, fallbackColor: string): string {\n  // corresponds to 'Auto' in palette.kind for generative color palette\n  const generatedColor = getConsistentSeriesNameColor(name);\n  return generatedColor ?? fallbackColor;\n}\n\n/**\n * Default classical qualitative palette that cycles through the colors array by index.\n */\nexport function getCategoricalPaletteColor(palette: string[], seriesIndex: number, fallbackColor: string): string {\n  if (palette === undefined) {\n    return fallbackColor;\n  }\n  // Loop through predefined static color palette\n  const paletteTotalColors = palette.length ?? 1;\n  const paletteIndex = seriesIndex % paletteTotalColors;\n  // fallback color comes from echarts theme\n  const seriesColor = palette[paletteIndex] ?? fallbackColor;\n  return seriesColor;\n}\n\n/*\n * Generate a consistent series name color (if series name includes 'error', it will have a red hue).\n */\nexport function getConsistentSeriesNameColor(inputString: string): string {\n  return getConsistentColor(inputString, inputString.toLowerCase().includes('error'));\n}\n"],"names":["getConsistentColor","getSeriesColor","props","categoricalPalette","visual","muiPrimaryColor","seriesName","seriesIndex","querySettings","queryHasMultipleResults","colorMode","colorValue","fallbackColor","Array","isArray","palette","mode","getCategoricalPaletteColor","getAutoPaletteColor","name","generatedColor","getConsistentSeriesNameColor","undefined","paletteTotalColors","length","paletteIndex","seriesColor","inputString","toLowerCase","includes"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,kBAAkB,QAAQ,YAAY;AAY/C;;CAEC,GACD,OAAO,SAASC,eAAeC,KAAuB;IACpD,MAAM,EACJC,kBAAkB,EAClBC,MAAM,EACNC,eAAe,EACfC,UAAU,EACVC,WAAW,EACXC,aAAa,EACbC,uBAAuB,EACxB,GAAGP;IAEJ,2EAA2E;IAC3E,IAAIM,eAAe;QACjB,IAAIA,cAAcE,SAAS,KAAK,SAAS;YACvC,OAAOF,cAAcG,UAAU;QACjC,OAAO,IAAIH,cAAcE,SAAS,KAAK,kBAAkB,CAACD,yBAAyB;YACjF,OAAOD,cAAcG,UAAU;QACjC;IACF;IAEA,kGAAkG;IAClG,MAAMC,gBACJC,MAAMC,OAAO,CAACX,uBAAuBA,kBAAkB,CAAC,EAAE,GACrDA,kBAAkB,CAAC,EAAE,CAAY,6DAA6D;OAC/FE;IAEN,6GAA6G;IAC7G,IAAID,OAAOW,OAAO,EAAEC,SAAS,eAAe;QAC1C,OAAOC,2BAA2Bd,oBAAoBI,aAAaK;IACrE;IAEA,OAAOM,oBAAoBZ,YAAYM;AACzC;AAEA;;;CAGC,GACD,OAAO,SAASM,oBAAoBC,IAAY,EAAEP,aAAqB;IACrE,qEAAqE;IACrE,MAAMQ,iBAAiBC,6BAA6BF;IACpD,OAAOC,kBAAkBR;AAC3B;AAEA;;CAEC,GACD,OAAO,SAASK,2BAA2BF,OAAiB,EAAER,WAAmB,EAAEK,aAAqB;IACtG,IAAIG,YAAYO,WAAW;QACzB,OAAOV;IACT;IACA,+CAA+C;IAC/C,MAAMW,qBAAqBR,QAAQS,MAAM,IAAI;IAC7C,MAAMC,eAAelB,cAAcgB;IACnC,0CAA0C;IAC1C,MAAMG,cAAcX,OAAO,CAACU,aAAa,IAAIb;IAC7C,OAAOc;AACT;AAEA;;CAEC,GACD,OAAO,SAASL,6BAA6BM,WAAmB;IAC9D,OAAO3B,mBAAmB2B,aAAaA,YAAYC,WAAW,GAAGC,QAAQ,CAAC;AAC5E"}

package/lib/palette.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Return a consistent color for (name, error) tuple
+ */
+export declare function getConsistentColor(name: string, error: boolean): string;
+export declare function getConsistentCategoricalColor(name: string, error: boolean, categoricalPalette: string[], errorPalette: string[]): string;
+//# sourceMappingURL=palette.d.ts.map

package/lib/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/palette.ts"],"names":[],"mappings":"AAkCA;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CAQvE;AAED,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,OAAO,EACd,kBAAkB,EAAE,MAAM,EAAE,EAC5B,YAAY,EAAE,MAAM,EAAE,GACrB,MAAM,CAaR"}

package/lib/palette.js

@@ -0,0 +1,64 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import ColorHash from 'color-hash';
+// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.
+// More info: https://github.com/zenozeng/color-hash#custom-hue
+// Picked min of 20 and max of 360 to exclude common threshold colors (red).
+// Items with "error" in them will always be generated as red.
+const ERROR_HUE_CUTOFF = 20;
+const colorGenerator = new ColorHash({
+    hue: {
+        min: ERROR_HUE_CUTOFF,
+        max: 360
+    }
+});
+const redColorGenerator = new ColorHash({
+    hue: {
+        min: 0,
+        max: ERROR_HUE_CUTOFF
+    }
+});
+function computeConsistentColor(name, error) {
+    const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);
+    const saturationPercent = `${(saturation * 100).toFixed(0)}%`;
+    const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;
+    return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;
+}
+// To check whether a color has already been generated for a given string.
+// TODO: Predefined color aliases will be defined here
+const colorLookup = {};
+/**
+ * Return a consistent color for (name, error) tuple
+ */ export function getConsistentColor(name, error) {
+    const key = `${name}_____${error}`;
+    let value = colorLookup[key];
+    if (!value) {
+        value = computeConsistentColor(name, error);
+        colorLookup[key] = value;
+    }
+    return value;
+}
+export function getConsistentCategoricalColor(name, error, categoricalPalette, errorPalette) {
+    const palette = error ? errorPalette : categoricalPalette;
+    if (palette.length === 0) {
+        console.warn('getConsistentCategoricalColor() called with empty color palette, fallback to #000');
+        return '#000';
+    }
+    let hash = 0;
+    for(let i = 0; i < name.length; i++){
+        hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return palette[Math.abs(hash) % palette.length] ?? '#000';
+}
+
+//# sourceMappingURL=palette.js.map

package/lib/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/palette.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport ColorHash from 'color-hash';\n\n// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.\n// More info: https://github.com/zenozeng/color-hash#custom-hue\n// Picked min of 20 and max of 360 to exclude common threshold colors (red).\n// Items with \"error\" in them will always be generated as red.\nconst ERROR_HUE_CUTOFF = 20;\nconst colorGenerator = new ColorHash({ hue: { min: ERROR_HUE_CUTOFF, max: 360 } });\nconst redColorGenerator = new ColorHash({ hue: { min: 0, max: ERROR_HUE_CUTOFF } });\n\nfunction computeConsistentColor(name: string, error: boolean): string {\n  const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);\n  const saturationPercent = `${(saturation * 100).toFixed(0)}%`;\n  const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;\n  return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;\n}\n\n// To check whether a color has already been generated for a given string.\n// TODO: Predefined color aliases will be defined here\nconst colorLookup: Record<string, string> = {};\n\n/**\n * Return a consistent color for (name, error) tuple\n */\nexport function getConsistentColor(name: string, error: boolean): string {\n  const key = `${name}_____${error}`;\n  let value = colorLookup[key];\n  if (!value) {\n    value = computeConsistentColor(name, error);\n    colorLookup[key] = value;\n  }\n  return value;\n}\n\nexport function getConsistentCategoricalColor(\n  name: string,\n  error: boolean,\n  categoricalPalette: string[],\n  errorPalette: string[]\n): string {\n  const palette = error ? errorPalette : categoricalPalette;\n  if (palette.length === 0) {\n    console.warn('getConsistentCategoricalColor() called with empty color palette, fallback to #000');\n    return '#000';\n  }\n\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = name.charCodeAt(i) + ((hash << 5) - hash);\n  }\n\n  return palette[Math.abs(hash) % palette.length] ?? '#000';\n}\n"],"names":["ColorHash","ERROR_HUE_CUTOFF","colorGenerator","hue","min","max","redColorGenerator","computeConsistentColor","name","error","saturation","lightness","hsl","saturationPercent","toFixed","lightnessPercent","colorLookup","getConsistentColor","key","value","getConsistentCategoricalColor","categoricalPalette","errorPalette","palette","length","console","warn","hash","i","charCodeAt","Math","abs"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,eAAe,aAAa;AAEnC,qFAAqF;AACrF,+DAA+D;AAC/D,4EAA4E;AAC5E,8DAA8D;AAC9D,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB,IAAIF,UAAU;IAAEG,KAAK;QAAEC,KAAKH;QAAkBI,KAAK;IAAI;AAAE;AAChF,MAAMC,oBAAoB,IAAIN,UAAU;IAAEG,KAAK;QAAEC,KAAK;QAAGC,KAAKJ;IAAiB;AAAE;AAEjF,SAASM,uBAAuBC,IAAY,EAAEC,KAAc;IAC1D,MAAM,CAACN,KAAKO,YAAYC,UAAU,GAAGF,QAAQH,kBAAkBM,GAAG,CAACJ,QAAQN,eAAeU,GAAG,CAACJ;IAC9F,MAAMK,oBAAoB,GAAG,AAACH,CAAAA,aAAa,GAAE,EAAGI,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7D,MAAMC,mBAAmB,GAAG,AAACJ,CAAAA,YAAY,GAAE,EAAGG,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3D,OAAO,CAAC,KAAK,EAAEX,IAAIW,OAAO,CAAC,GAAG,CAAC,EAAED,kBAAkB,CAAC,EAAEE,iBAAiB,KAAK,CAAC;AAC/E;AAEA,0EAA0E;AAC1E,sDAAsD;AACtD,MAAMC,cAAsC,CAAC;AAE7C;;CAEC,GACD,OAAO,SAASC,mBAAmBT,IAAY,EAAEC,KAAc;IAC7D,MAAMS,MAAM,GAAGV,KAAK,KAAK,EAAEC,OAAO;IAClC,IAAIU,QAAQH,WAAW,CAACE,IAAI;IAC5B,IAAI,CAACC,OAAO;QACVA,QAAQZ,uBAAuBC,MAAMC;QACrCO,WAAW,CAACE,IAAI,GAAGC;IACrB;IACA,OAAOA;AACT;AAEA,OAAO,SAASC,8BACdZ,IAAY,EACZC,KAAc,EACdY,kBAA4B,EAC5BC,YAAsB;IAEtB,MAAMC,UAAUd,QAAQa,eAAeD;IACvC,IAAIE,QAAQC,MAAM,KAAK,GAAG;QACxBC,QAAQC,IAAI,CAAC;QACb,OAAO;IACT;IAEA,IAAIC,OAAO;IACX,IAAK,IAAIC,IAAI,GAAGA,IAAIpB,KAAKgB,MAAM,EAAEI,IAAK;QACpCD,OAAOnB,KAAKqB,UAAU,CAACD,KAAM,CAAA,AAACD,CAAAA,QAAQ,CAAA,IAAKA,IAAG;IAChD;IAEA,OAAOJ,OAAO,CAACO,KAAKC,GAAG,CAACJ,QAAQJ,QAAQC,MAAM,CAAC,IAAI;AACrD"}

package/lib/pie-chart-model.d.ts

@@ -0,0 +1,71 @@
+import { ModeOption, SortOption } from '@perses-dev/components';
+import { CalculationType, Definition, FormatOptions } from '@perses-dev/core';
+import { LegendSpecOptions, OptionsEditorProps } from '@perses-dev/plugin-system';
+import { QuerySettingsOptions, StackOptions } from './model';
+export declare const DEFAULT_CONNECT_NULLS = false;
+export declare const POINT_SIZE_OFFSET = 1.5;
+export declare const DEFAULT_FORMAT: FormatOptions;
+export declare const DEFAULT_SORT: SortOption;
+export declare const DEFAULT_MODE: ModeOption;
+export declare const DEFAULT_LINE_WIDTH = 1.25;
+export declare const DEFAULT_AREA_OPACITY = 0;
+export declare const DEFAULT_POINT_RADIUS: number;
+export declare const VISUAL_CONFIG: {
+    lineWidth: {
+        label: string;
+        testId: string;
+        min: number;
+        max: number;
+        step: number;
+    };
+    pointRadius: {
+        label: string;
+        testId: string;
+        min: number;
+        max: number;
+        step: number;
+    };
+    areaOpacity: {
+        label: string;
+        testId: string;
+        min: number;
+        max: number;
+        step: number;
+    };
+    stack: {
+        label: string;
+    };
+    connectNulls: {
+        label: string;
+    };
+};
+export interface BarChartDefinition extends Definition<PieChartOptions> {
+    kind: 'PieChart';
+}
+export declare const DEFAULT_VISUAL: PieChartVisualOptions;
+export interface PieChartPaletteOptions {
+    mode: 'auto' | 'categorical';
+}
+export interface PieChartOptions {
+    legend?: LegendSpecOptions;
+    visual?: PieChartVisualOptions;
+    querySettings?: QuerySettingsOptions[];
+    calculation: CalculationType;
+    radius: number;
+    format?: FormatOptions;
+    sort?: SortOption;
+    mode?: ModeOption;
+}
+export type PieChartVisualOptions = {
+    display?: 'line' | 'bar';
+    lineWidth?: number;
+    areaOpacity?: number;
+    showPoints?: 'auto' | 'always';
+    palette?: PieChartPaletteOptions;
+    pointRadius?: number;
+    stack?: StackOptions;
+    connectNulls?: boolean;
+};
+export type PieChartOptionsEditorProps = OptionsEditorProps<PieChartOptions>;
+export declare function createInitialPieChartOptions(): PieChartOptions;
+//# sourceMappingURL=pie-chart-model.d.ts.map

package/lib/pie-chart-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart-model.d.ts","sourceRoot":"","sources":["../../src/pie-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAuB,UAAU,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAElF,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAC3C,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,cAAc,EAAE,aAAsD,CAAC;AACpF,eAAO,MAAM,YAAY,EAAE,UAAmB,CAAC;AAC/C,eAAO,MAAM,YAAY,EAAE,UAAoB,CAAC;AAChD,eAAO,MAAM,kBAAkB,OAAO,CAAC;AACvC,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,oBAAoB,QAAyC,CAAC;AAE3E,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,UAAU,CAAC,eAAe,CAAC;IACrE,IAAI,EAAE,UAAU,CAAC;CAClB;AACD,eAAO,MAAM,cAAc,EAAE,qBAK5B,CAAC;AACF,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;AAE7E,wBAAgB,4BAA4B,IAAI,eAAe,CAS9D"}

package/lib/pie-chart-model.js

@@ -0,0 +1,71 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { DEFAULT_CALCULATION } from '@perses-dev/core';
+export const DEFAULT_CONNECT_NULLS = false;
+export const POINT_SIZE_OFFSET = 1.5;
+export const DEFAULT_FORMAT = {
+    unit: 'decimal',
+    shortValues: true
+};
+export const DEFAULT_SORT = 'desc';
+export const DEFAULT_MODE = 'value';
+export const DEFAULT_LINE_WIDTH = 1.25;
+export const DEFAULT_AREA_OPACITY = 0;
+export const DEFAULT_POINT_RADIUS = DEFAULT_LINE_WIDTH + POINT_SIZE_OFFSET;
+export const VISUAL_CONFIG = {
+    lineWidth: {
+        label: 'Line Width',
+        testId: 'slider-line-width',
+        min: 0.25,
+        max: 3,
+        step: 0.25
+    },
+    pointRadius: {
+        label: 'Point Radius',
+        testId: 'slider-point-radius',
+        min: 0,
+        max: 6,
+        step: 0.25
+    },
+    areaOpacity: {
+        label: 'Area Opacity',
+        testId: 'slider-area-opacity',
+        min: 0,
+        max: 1,
+        step: 0.05
+    },
+    stack: {
+        label: 'Stack Series'
+    },
+    connectNulls: {
+        label: 'Connect Nulls'
+    }
+};
+export const DEFAULT_VISUAL = {
+    lineWidth: DEFAULT_LINE_WIDTH,
+    areaOpacity: DEFAULT_AREA_OPACITY,
+    pointRadius: DEFAULT_POINT_RADIUS,
+    connectNulls: DEFAULT_CONNECT_NULLS
+};
+export function createInitialPieChartOptions() {
+    return {
+        calculation: DEFAULT_CALCULATION,
+        format: DEFAULT_FORMAT,
+        radius: 50,
+        sort: DEFAULT_SORT,
+        mode: DEFAULT_MODE,
+        visual: DEFAULT_VISUAL
+    };
+}
+
+//# sourceMappingURL=pie-chart-model.js.map

package/lib/pie-chart-model.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/pie-chart-model.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ModeOption, SortOption } from '@perses-dev/components';\nimport { CalculationType, DEFAULT_CALCULATION, Definition, FormatOptions } from '@perses-dev/core';\nimport { LegendSpecOptions, OptionsEditorProps } from '@perses-dev/plugin-system';\n\nimport { QuerySettingsOptions, StackOptions } from './model';\n\nexport const DEFAULT_CONNECT_NULLS = false;\nexport const POINT_SIZE_OFFSET = 1.5;\nexport const DEFAULT_FORMAT: FormatOptions = { unit: 'decimal', shortValues: true };\nexport const DEFAULT_SORT: SortOption = 'desc';\nexport const DEFAULT_MODE: ModeOption = 'value';\nexport const DEFAULT_LINE_WIDTH = 1.25;\nexport const DEFAULT_AREA_OPACITY = 0;\nexport const DEFAULT_POINT_RADIUS = DEFAULT_LINE_WIDTH + POINT_SIZE_OFFSET;\n\nexport const VISUAL_CONFIG = {\n  lineWidth: {\n    label: 'Line Width',\n    testId: 'slider-line-width',\n    min: 0.25,\n    max: 3,\n    step: 0.25,\n  },\n  pointRadius: {\n    label: 'Point Radius',\n    testId: 'slider-point-radius',\n    min: 0,\n    max: 6,\n    step: 0.25,\n  },\n  areaOpacity: {\n    label: 'Area Opacity',\n    testId: 'slider-area-opacity',\n    min: 0,\n    max: 1,\n    step: 0.05,\n  },\n  stack: {\n    label: 'Stack Series',\n  },\n  connectNulls: {\n    label: 'Connect Nulls',\n  },\n};\n\nexport interface BarChartDefinition extends Definition<PieChartOptions> {\n  kind: 'PieChart';\n}\nexport const DEFAULT_VISUAL: PieChartVisualOptions = {\n  lineWidth: DEFAULT_LINE_WIDTH,\n  areaOpacity: DEFAULT_AREA_OPACITY,\n  pointRadius: DEFAULT_POINT_RADIUS,\n  connectNulls: DEFAULT_CONNECT_NULLS,\n};\nexport interface PieChartPaletteOptions {\n  mode: 'auto' | 'categorical';\n}\n\nexport interface PieChartOptions {\n  legend?: LegendSpecOptions;\n  visual?: PieChartVisualOptions;\n  querySettings?: QuerySettingsOptions[];\n  calculation: CalculationType;\n  radius: number;\n  format?: FormatOptions;\n  sort?: SortOption;\n  mode?: ModeOption;\n}\n\nexport type PieChartVisualOptions = {\n  display?: 'line' | 'bar';\n  lineWidth?: number;\n  areaOpacity?: number;\n  showPoints?: 'auto' | 'always';\n  palette?: PieChartPaletteOptions;\n  pointRadius?: number;\n  stack?: StackOptions;\n  connectNulls?: boolean;\n};\n\nexport type PieChartOptionsEditorProps = OptionsEditorProps<PieChartOptions>;\n\nexport function createInitialPieChartOptions(): PieChartOptions {\n  return {\n    calculation: DEFAULT_CALCULATION,\n    format: DEFAULT_FORMAT,\n    radius: 50,\n    sort: DEFAULT_SORT,\n    mode: DEFAULT_MODE,\n    visual: DEFAULT_VISUAL,\n  };\n}\n"],"names":["DEFAULT_CALCULATION","DEFAULT_CONNECT_NULLS","POINT_SIZE_OFFSET","DEFAULT_FORMAT","unit","shortValues","DEFAULT_SORT","DEFAULT_MODE","DEFAULT_LINE_WIDTH","DEFAULT_AREA_OPACITY","DEFAULT_POINT_RADIUS","VISUAL_CONFIG","lineWidth","label","testId","min","max","step","pointRadius","areaOpacity","stack","connectNulls","DEFAULT_VISUAL","createInitialPieChartOptions","calculation","format","radius","sort","mode","visual"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAA0BA,mBAAmB,QAAmC,mBAAmB;AAKnG,OAAO,MAAMC,wBAAwB,MAAM;AAC3C,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,iBAAgC;IAAEC,MAAM;IAAWC,aAAa;AAAK,EAAE;AACpF,OAAO,MAAMC,eAA2B,OAAO;AAC/C,OAAO,MAAMC,eAA2B,QAAQ;AAChD,OAAO,MAAMC,qBAAqB,KAAK;AACvC,OAAO,MAAMC,uBAAuB,EAAE;AACtC,OAAO,MAAMC,uBAAuBF,qBAAqBN,kBAAkB;AAE3E,OAAO,MAAMS,gBAAgB;IAC3BC,WAAW;QACTC,OAAO;QACPC,QAAQ;QACRC,KAAK;QACLC,KAAK;QACLC,MAAM;IACR;IACAC,aAAa;QACXL,OAAO;QACPC,QAAQ;QACRC,KAAK;QACLC,KAAK;QACLC,MAAM;IACR;IACAE,aAAa;QACXN,OAAO;QACPC,QAAQ;QACRC,KAAK;QACLC,KAAK;QACLC,MAAM;IACR;IACAG,OAAO;QACLP,OAAO;IACT;IACAQ,cAAc;QACZR,OAAO;IACT;AACF,EAAE;AAKF,OAAO,MAAMS,iBAAwC;IACnDV,WAAWJ;IACXW,aAAaV;IACbS,aAAaR;IACbW,cAAcpB;AAChB,EAAE;AA6BF,OAAO,SAASsB;IACd,OAAO;QACLC,aAAaxB;QACbyB,QAAQtB;QACRuB,QAAQ;QACRC,MAAMrB;QACNsB,MAAMrB;QACNsB,QAAQP;IACV;AACF"}

package/lib/setup-tests.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=setup-tests.d.ts.map

package/lib/setup-tests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-tests.d.ts","sourceRoot":"","sources":["../../src/setup-tests.ts"],"names":[],"mappings":"AAaA,OAAO,2BAA2B,CAAC"}

package/lib/setup-tests.js

@@ -0,0 +1,17 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import '@testing-library/jest-dom';
+// Always mock e-charts during tests since we don't have a proper canvas in jsdom
+jest.mock('echarts/core');
+
+//# sourceMappingURL=setup-tests.js.map

package/lib/setup-tests.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/setup-tests.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport '@testing-library/jest-dom';\n\n// Always mock e-charts during tests since we don't have a proper canvas in jsdom\njest.mock('echarts/core');\n"],"names":["jest","mock"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAO,4BAA4B;AAEnC,iFAAiF;AACjFA,KAAKC,IAAI,CAAC"}

package/lib/utils.d.ts

@@ -0,0 +1,7 @@
+import { PieChartData, SortOption } from '@perses-dev/components';
+export declare function calculatePercentages(data: PieChartData[]): Array<{
+    name: string;
+    value: number;
+}>;
+export declare function sortSeriesData(data: PieChartData[], sortOrder?: SortOption): PieChartData[];
+//# sourceMappingURL=utils.d.ts.map

package/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAGlE,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CASjG;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,SAAS,GAAE,UAAyB,GAAG,YAAY,EAAE,CA8BzG"}

package/lib/utils.js

@@ -0,0 +1,56 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { DEFAULT_SORT } from './pie-chart-model';
+export function calculatePercentages(data) {
+    const sum = data.reduce((accumulator, { value })=>accumulator + (value ?? 0), 0);
+    return data.map((seriesData)=>{
+        const percentage = (seriesData.value ?? 0) / sum * 100;
+        return {
+            ...seriesData,
+            value: percentage
+        };
+    });
+}
+export function sortSeriesData(data, sortOrder = DEFAULT_SORT) {
+    if (sortOrder === 'asc') {
+        // sort in ascending order by value
+        return data.sort((a, b)=>{
+            if (a.value === null) {
+                return 1;
+            }
+            if (b.value === null) {
+                return -1;
+            }
+            if (a.value === b.value) {
+                return 0;
+            }
+            return a.value < b.value ? 1 : -1;
+        });
+    } else {
+        // sort in descending order by value
+        return data.sort((a, b)=>{
+            if (a.value === null) {
+                return -1;
+            }
+            if (b.value === null) {
+                return 1;
+            }
+            if (a.value === b.value) {
+                return 0;
+            }
+            return a.value < b.value ? -1 : 1;
+        });
+    }
+}
+
+//# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PieChartData, SortOption } from '@perses-dev/components';\nimport { DEFAULT_SORT } from './pie-chart-model';\n\nexport function calculatePercentages(data: PieChartData[]): Array<{ name: string; value: number }> {\n  const sum = data.reduce((accumulator, { value }) => accumulator + (value ?? 0), 0);\n  return data.map((seriesData) => {\n    const percentage = ((seriesData.value ?? 0) / sum) * 100;\n    return {\n      ...seriesData,\n      value: percentage,\n    };\n  });\n}\n\nexport function sortSeriesData(data: PieChartData[], sortOrder: SortOption = DEFAULT_SORT): PieChartData[] {\n  if (sortOrder === 'asc') {\n    // sort in ascending order by value\n    return data.sort((a, b) => {\n      if (a.value === null) {\n        return 1;\n      }\n      if (b.value === null) {\n        return -1;\n      }\n      if (a.value === b.value) {\n        return 0;\n      }\n      return a.value < b.value ? 1 : -1;\n    });\n  } else {\n    // sort in descending order by value\n    return data.sort((a, b) => {\n      if (a.value === null) {\n        return -1;\n      }\n      if (b.value === null) {\n        return 1;\n      }\n      if (a.value === b.value) {\n        return 0;\n      }\n      return a.value < b.value ? -1 : 1;\n    });\n  }\n}\n"],"names":["DEFAULT_SORT","calculatePercentages","data","sum","reduce","accumulator","value","map","seriesData","percentage","sortSeriesData","sortOrder","sort","a","b"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,YAAY,QAAQ,oBAAoB;AAEjD,OAAO,SAASC,qBAAqBC,IAAoB;IACvD,MAAMC,MAAMD,KAAKE,MAAM,CAAC,CAACC,aAAa,EAAEC,KAAK,EAAE,GAAKD,cAAeC,CAAAA,SAAS,CAAA,GAAI;IAChF,OAAOJ,KAAKK,GAAG,CAAC,CAACC;QACf,MAAMC,aAAa,AAAED,CAAAA,WAAWF,KAAK,IAAI,CAAA,IAAKH,MAAO;QACrD,OAAO;YACL,GAAGK,UAAU;YACbF,OAAOG;QACT;IACF;AACF;AAEA,OAAO,SAASC,eAAeR,IAAoB,EAAES,YAAwBX,YAAY;IACvF,IAAIW,cAAc,OAAO;QACvB,mCAAmC;QACnC,OAAOT,KAAKU,IAAI,CAAC,CAACC,GAAGC;YACnB,IAAID,EAAEP,KAAK,KAAK,MAAM;gBACpB,OAAO;YACT;YACA,IAAIQ,EAAER,KAAK,KAAK,MAAM;gBACpB,OAAO,CAAC;YACV;YACA,IAAIO,EAAEP,KAAK,KAAKQ,EAAER,KAAK,EAAE;gBACvB,OAAO;YACT;YACA,OAAOO,EAAEP,KAAK,GAAGQ,EAAER,KAAK,GAAG,IAAI,CAAC;QAClC;IACF,OAAO;QACL,oCAAoC;QACpC,OAAOJ,KAAKU,IAAI,CAAC,CAACC,GAAGC;YACnB,IAAID,EAAEP,KAAK,KAAK,MAAM;gBACpB,OAAO,CAAC;YACV;YACA,IAAIQ,EAAER,KAAK,KAAK,MAAM;gBACpB,OAAO;YACT;YACA,IAAIO,EAAEP,KAAK,KAAKQ,EAAER,KAAK,EAAE;gBACvB,OAAO;YACT;YACA,OAAOO,EAAEP,KAAK,GAAGQ,EAAER,KAAK,GAAG,CAAC,IAAI;QAClC;IACF;AACF"}