@perses-dev/bar-chart-plugin 0.11.1 → 0.13.0-beta.0

package/lib/cjs/BarChartOptionsEditorSettings.js

@@ -21,9 +21,9 @@ Object.defineProperty(exports, "BarChartOptionsEditorSettings", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _immer = require("immer");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
@@ -57,40 +57,109 @@ function BarChartOptionsEditorSettings(props) {
     };
     const handleResetSettings = ()=>{
         onChange((0, _immer.produce)(value, (draft)=>{
-            draft.calculation = _core.DEFAULT_CALCULATION;
+            draft.calculation = _pluginsystem.DEFAULT_CALCULATION;
             draft.format = _barchartmodel.DEFAULT_FORMAT;
             draft.sort = _barchartmodel.DEFAULT_SORT;
             draft.mode = _barchartmodel.DEFAULT_MODE;
+            draft.groupBy = _barchartmodel.DEFAULT_GROUP_BY;
+            draft.isStacked = _barchartmodel.DEFAULT_IS_STACKED;
+            draft.orientation = _barchartmodel.DEFAULT_ORIENTATION;
         }));
     };
     // ensures decimalPlaces defaults to correct value
     const format = (0, _merge.default)({}, _barchartmodel.DEFAULT_FORMAT, value.format);
+    const groupBy = value.groupBy ?? _barchartmodel.DEFAULT_GROUP_BY;
+    const isStacked = value.isStacked ?? _barchartmodel.DEFAULT_IS_STACKED;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGrid, {
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
-                    title: "Misc",
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
-                            value: format,
-                            onChange: handleUnitChange,
-                            disabled: value.mode === 'percentage'
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.CalculationSelector, {
-                            value: value.calculation,
-                            onChange: handleCalculationChange
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SortSelector, {
-                            value: value.sort,
-                            onChange: handleSortChange
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ModeSelector, {
-                            value: value.mode,
-                            onChange: handleModeChange,
-                            disablePercentageMode: (0, _core.isPercentUnit)(format)
-                        })
-                    ]
-                })
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorColumn, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+                        title: "Misc",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
+                                value: format,
+                                onChange: handleUnitChange,
+                                disabled: value.mode === 'percentage'
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.CalculationSelector, {
+                                value: value.calculation,
+                                onChange: handleCalculationChange
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SortSelector, {
+                                value: value.sort,
+                                onChange: handleSortChange
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ModeSelector, {
+                                value: value.mode,
+                                onChange: handleModeChange,
+                                disablePercentageMode: (0, _components.isPercentUnit)(format)
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ToggleButtonGroup, {
+                                exclusive: true,
+                                size: "small",
+                                value: value.orientation ?? 'horizontal',
+                                onChange: (_, v)=>v && onChange((0, _immer.produce)(value, (draft)=>{
+                                        draft.orientation = v;
+                                    })),
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                                        value: "horizontal",
+                                        children: "Horizontal"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ToggleButton, {
+                                        value: "vertical",
+                                        children: "Vertical"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+                        title: "Stacking",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                                multiple: true,
+                                freeSolo: true,
+                                value: groupBy,
+                                onChange: (_, newValue)=>{
+                                    const filtered = newValue.filter((v)=>v.trim() !== '');
+                                    onChange((0, _immer.produce)(value, (draft)=>{
+                                        draft.groupBy = filtered;
+                                        if (filtered.length === 0) draft.isStacked = false;
+                                    }));
+                                },
+                                options: [],
+                                renderTags: (tagValues, getTagProps)=>tagValues.map((option, index)=>/*#__PURE__*/ (0, _react.createElement)(_material.Chip, {
+                                            size: "small",
+                                            variant: "outlined",
+                                            label: option,
+                                            ...getTagProps({
+                                                index
+                                            }),
+                                            key: option
+                                        })),
+                                renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                        ...params,
+                                        size: "small",
+                                        label: "Group By Labels",
+                                        placeholder: "Type label name + Enter"
+                                    })
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                    size: "small",
+                                    checked: isStacked,
+                                    disabled: groupBy.length === 0,
+                                    onChange: (e)=>onChange((0, _immer.produce)(value, (draft)=>{
+                                            draft.isStacked = e.target.checked;
+                                        }))
+                                }),
+                                label: "Stack bars"
+                            })
+                        ]
+                    })
+                ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {

package/lib/cjs/BarChartPanel.js

@@ -24,15 +24,16 @@ const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
 const _material = require("@mui/material");
 const _react = require("react");
-const _core = require("@perses-dev/core");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _utils = require("./utils");
 const _BarChartBase = require("./BarChartBase");
 function BarChartPanel(props) {
-    const { spec: { calculation, format, sort, mode }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, format, sort, mode, groupBy = [], isStacked = false, orientation = 'horizontal' }, contentDimensions, queryResults } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const PADDING = chartsTheme.container.padding.default;
     const barChartData = (0, _react.useMemo)(()=>{
-        const calculate = _core.CalculationsMap[calculation];
+        if (groupBy.length > 0) return [];
+        const calculate = _pluginsystem.CalculationsMap[calculation];
         const barChartData = [];
         for (const result of queryResults){
             for (const seriesData of result.data.series){
@@ -53,9 +54,72 @@ function BarChartPanel(props) {
         queryResults,
         sort,
         mode,
+        calculation,
+        groupBy
+    ]);
+    const stackedBarChartData = (0, _react.useMemo)(()=>{
+        if (groupBy.length === 0) return null;
+        const calculate = _pluginsystem.CalculationsMap[calculation];
+        const groupMap = new Map();
+        const segmentNamesOrdered = [];
+        const segmentNamesSet = new Set();
+        for (const queryResult of queryResults){
+            for (const seriesData of queryResult.data.series){
+                const labels = seriesData.labels ?? {};
+                const groupKey = groupBy.map((k)=>labels[k] ?? '').join(' / ');
+                const remainingEntries = Object.entries(labels).filter(([k])=>!groupBy.includes(k));
+                const segmentName = remainingEntries.length > 0 ? '{' + remainingEntries.map(([k, v])=>`${k}="${v}"`).join(', ') + '}' : seriesData.formattedName ?? seriesData.name;
+                if (!groupMap.has(groupKey)) {
+                    groupMap.set(groupKey, new Map());
+                }
+                const segMap = groupMap.get(groupKey);
+                if (!segMap) continue;
+                const value = calculate(seriesData.values) ?? 0;
+                segMap.set(segmentName, (segMap.get(segmentName) ?? 0) + value);
+                if (!segmentNamesSet.has(segmentName)) {
+                    segmentNamesSet.add(segmentName);
+                    segmentNamesOrdered.push(segmentName);
+                }
+            }
+        }
+        if (groupMap.size === 0) return null;
+        const getTotalValue = (cat)=>Array.from(groupMap.get(cat)?.values() ?? []).reduce((a, b)=>a + b, 0);
+        let categories = Array.from(groupMap.keys());
+        if (sort === 'asc') {
+            categories = categories.sort((a, b)=>getTotalValue(a) - getTotalValue(b));
+        } else if (sort === 'desc') {
+            categories = categories.sort((a, b)=>getTotalValue(b) - getTotalValue(a));
+        }
+        const series = segmentNamesOrdered.map((segName)=>{
+            const values = categories.map((cat)=>{
+                const rawVal = groupMap.get(cat)?.get(segName) ?? null;
+                if (mode === 'percentage' && rawVal !== null) {
+                    const total = getTotalValue(cat);
+                    return total > 0 ? rawVal / total * 100 : 0;
+                }
+                return rawVal;
+            });
+            return {
+                name: segName,
+                values
+            };
+        });
+        return {
+            categories,
+            series
+        };
+    }, [
+        queryResults,
+        groupBy,
+        sort,
+        mode,
         calculation
     ]);
     if (contentDimensions === undefined) return null;
+    const effectiveFormat = mode === 'percentage' ? {
+        unit: 'percent',
+        decimalPlaces: format?.decimalPlaces
+    } : format;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             padding: `${PADDING}px`
@@ -64,8 +128,11 @@ function BarChartPanel(props) {
             width: contentDimensions.width - PADDING * 2,
             height: contentDimensions.height - PADDING * 2,
             data: barChartData,
-            format: format,
-            mode: mode
+            format: groupBy.length > 0 ? effectiveFormat : format,
+            mode: mode,
+            groupedData: stackedBarChartData,
+            isStacked: isStacked,
+            orientation: orientation
         })
     });
 }

package/lib/cjs/bar-chart-model.js

@@ -24,9 +24,18 @@ _export(exports, {
     get DEFAULT_FORMAT () {
         return DEFAULT_FORMAT;
     },
+    get DEFAULT_GROUP_BY () {
+        return DEFAULT_GROUP_BY;
+    },
+    get DEFAULT_IS_STACKED () {
+        return DEFAULT_IS_STACKED;
+    },
     get DEFAULT_MODE () {
         return DEFAULT_MODE;
     },
+    get DEFAULT_ORIENTATION () {
+        return DEFAULT_ORIENTATION;
+    },
     get DEFAULT_SORT () {
         return DEFAULT_SORT;
     },
@@ -34,18 +43,24 @@ _export(exports, {
         return createInitialBarChartOptions;
     }
 });
-const _core = require("@perses-dev/core");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
 };
 const DEFAULT_SORT = 'desc';
 const DEFAULT_MODE = 'value';
+const DEFAULT_ORIENTATION = 'horizontal';
+const DEFAULT_GROUP_BY = [];
+const DEFAULT_IS_STACKED = false;
 function createInitialBarChartOptions() {
     return {
-        calculation: _core.DEFAULT_CALCULATION,
+        calculation: _pluginsystem.DEFAULT_CALCULATION,
         format: DEFAULT_FORMAT,
         sort: DEFAULT_SORT,
-        mode: DEFAULT_MODE
+        mode: DEFAULT_MODE,
+        orientation: DEFAULT_ORIENTATION,
+        groupBy: DEFAULT_GROUP_BY,
+        isStacked: DEFAULT_IS_STACKED
     };
 }

package/lib/tresholds.d.ts

@@ -1,4 +1,4 @@
-import { ThresholdColorPalette, ThresholdOptions, FormatOptions } from '@perses-dev/core';
+import { FormatOptions, ThresholdColorPalette, ThresholdOptions } from '@perses-dev/components';
 export type GaugeColorStop = [number, string];
 export type EChartsAxisLineColors = GaugeColorStop[];
 export declare const defaultThresholdInput: ThresholdOptions;

package/lib/tresholds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tresholds.d.ts","sourceRoot":"","sources":["../../src/tresholds.ts"],"names":[],"mappings":"AAaA,OAAO,EAAe,qBAAqB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGvG,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,cAAc,EAAE,CAAC;AAErD,eAAO,MAAM,qBAAqB,EAAE,gBAA4C,CAAC;AAEjF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,gBAAgB,EAC5B,IAAI,EAAE,aAAa,EACnB,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,qBAAqB,GAC7B,qBAAqB,CA4BvB"}
+{"version":3,"file":"tresholds.d.ts","sourceRoot":"","sources":["../../src/tresholds.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAe,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG7G,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,cAAc,EAAE,CAAC;AAErD,eAAO,MAAM,qBAAqB,EAAE,gBAA4C,CAAC;AAEjF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,gBAAgB,EAC5B,IAAI,EAAE,aAAa,EACnB,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,qBAAqB,GAC7B,qBAAqB,CA4BvB"}

package/lib/tresholds.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tresholds.ts"],"sourcesContent":["// Copyright 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 { StepOptions, ThresholdColorPalette, ThresholdOptions, FormatOptions } from '@perses-dev/core';\nimport zip from 'lodash/zip';\n\nexport type GaugeColorStop = [number, string];\n\nexport type EChartsAxisLineColors = GaugeColorStop[];\n\nexport const defaultThresholdInput: ThresholdOptions = { steps: [{ value: 0 }] };\n\nexport function convertThresholds(\n  thresholds: ThresholdOptions,\n  unit: FormatOptions,\n  max: number,\n  palette: ThresholdColorPalette\n): EChartsAxisLineColors {\n  const defaultThresholdColor = thresholds.defaultColor ?? palette.defaultColor;\n  const defaultThresholdSteps: EChartsAxisLineColors = [[0, defaultThresholdColor]];\n\n  if (thresholds.steps !== undefined) {\n    // https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color\n    // color segments must be decimal between 0 and 1\n    const segmentMax = 1;\n    const valuesArr: number[] = thresholds.steps.map((step: StepOptions) => {\n      if (thresholds.mode === 'percent') {\n        return step.value / 100;\n      }\n      return step.value / max;\n    });\n    valuesArr.push(segmentMax);\n\n    const colorsArr = thresholds.steps.map((step: StepOptions, index) => step.color ?? palette.palette[index]);\n    colorsArr.unshift(defaultThresholdColor);\n\n    const zippedArr = zip(valuesArr, colorsArr);\n    return zippedArr.map((elem) => {\n      const convertedValues = elem[0] ?? segmentMax;\n      const convertedColors = elem[1] ?? defaultThresholdColor;\n      return [convertedValues, convertedColors];\n    });\n  } else {\n    return defaultThresholdSteps;\n  }\n}\n"],"names":["zip","defaultThresholdInput","steps","value","convertThresholds","thresholds","unit","max","palette","defaultThresholdColor","defaultColor","defaultThresholdSteps","undefined","segmentMax","valuesArr","map","step","mode","push","colorsArr","index","color","unshift","zippedArr","elem","convertedValues","convertedColors"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,OAAOA,SAAS,aAAa;AAM7B,OAAO,MAAMC,wBAA0C;IAAEC,OAAO;QAAC;YAAEC,OAAO;QAAE;KAAE;AAAC,EAAE;AAEjF,OAAO,SAASC,kBACdC,UAA4B,EAC5BC,IAAmB,EACnBC,GAAW,EACXC,OAA8B;IAE9B,MAAMC,wBAAwBJ,WAAWK,YAAY,IAAIF,QAAQE,YAAY;IAC7E,MAAMC,wBAA+C;QAAC;YAAC;YAAGF;SAAsB;KAAC;IAEjF,IAAIJ,WAAWH,KAAK,KAAKU,WAAW;QAClC,kFAAkF;QAClF,iDAAiD;QACjD,MAAMC,aAAa;QACnB,MAAMC,YAAsBT,WAAWH,KAAK,CAACa,GAAG,CAAC,CAACC;YAChD,IAAIX,WAAWY,IAAI,KAAK,WAAW;gBACjC,OAAOD,KAAKb,KAAK,GAAG;YACtB;YACA,OAAOa,KAAKb,KAAK,GAAGI;QACtB;QACAO,UAAUI,IAAI,CAACL;QAEf,MAAMM,YAAYd,WAAWH,KAAK,CAACa,GAAG,CAAC,CAACC,MAAmBI,QAAUJ,KAAKK,KAAK,IAAIb,QAAQA,OAAO,CAACY,MAAM;QACzGD,UAAUG,OAAO,CAACb;QAElB,MAAMc,YAAYvB,IAAIc,WAAWK;QACjC,OAAOI,UAAUR,GAAG,CAAC,CAACS;YACpB,MAAMC,kBAAkBD,IAAI,CAAC,EAAE,IAAIX;YACnC,MAAMa,kBAAkBF,IAAI,CAAC,EAAE,IAAIf;YACnC,OAAO;gBAACgB;gBAAiBC;aAAgB;QAC3C;IACF,OAAO;QACL,OAAOf;IACT;AACF"}
+{"version":3,"sources":["../../src/tresholds.ts"],"sourcesContent":["// Copyright 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 { FormatOptions, StepOptions, ThresholdColorPalette, ThresholdOptions } from '@perses-dev/components';\nimport zip from 'lodash/zip';\n\nexport type GaugeColorStop = [number, string];\n\nexport type EChartsAxisLineColors = GaugeColorStop[];\n\nexport const defaultThresholdInput: ThresholdOptions = { steps: [{ value: 0 }] };\n\nexport function convertThresholds(\n  thresholds: ThresholdOptions,\n  unit: FormatOptions,\n  max: number,\n  palette: ThresholdColorPalette\n): EChartsAxisLineColors {\n  const defaultThresholdColor = thresholds.defaultColor ?? palette.defaultColor;\n  const defaultThresholdSteps: EChartsAxisLineColors = [[0, defaultThresholdColor]];\n\n  if (thresholds.steps !== undefined) {\n    // https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color\n    // color segments must be decimal between 0 and 1\n    const segmentMax = 1;\n    const valuesArr: number[] = thresholds.steps.map((step: StepOptions) => {\n      if (thresholds.mode === 'percent') {\n        return step.value / 100;\n      }\n      return step.value / max;\n    });\n    valuesArr.push(segmentMax);\n\n    const colorsArr = thresholds.steps.map((step: StepOptions, index) => step.color ?? palette.palette[index]);\n    colorsArr.unshift(defaultThresholdColor);\n\n    const zippedArr = zip(valuesArr, colorsArr);\n    return zippedArr.map((elem) => {\n      const convertedValues = elem[0] ?? segmentMax;\n      const convertedColors = elem[1] ?? defaultThresholdColor;\n      return [convertedValues, convertedColors];\n    });\n  } else {\n    return defaultThresholdSteps;\n  }\n}\n"],"names":["zip","defaultThresholdInput","steps","value","convertThresholds","thresholds","unit","max","palette","defaultThresholdColor","defaultColor","defaultThresholdSteps","undefined","segmentMax","valuesArr","map","step","mode","push","colorsArr","index","color","unshift","zippedArr","elem","convertedValues","convertedColors"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,OAAOA,SAAS,aAAa;AAM7B,OAAO,MAAMC,wBAA0C;IAAEC,OAAO;QAAC;YAAEC,OAAO;QAAE;KAAE;AAAC,EAAE;AAEjF,OAAO,SAASC,kBACdC,UAA4B,EAC5BC,IAAmB,EACnBC,GAAW,EACXC,OAA8B;IAE9B,MAAMC,wBAAwBJ,WAAWK,YAAY,IAAIF,QAAQE,YAAY;IAC7E,MAAMC,wBAA+C;QAAC;YAAC;YAAGF;SAAsB;KAAC;IAEjF,IAAIJ,WAAWH,KAAK,KAAKU,WAAW;QAClC,kFAAkF;QAClF,iDAAiD;QACjD,MAAMC,aAAa;QACnB,MAAMC,YAAsBT,WAAWH,KAAK,CAACa,GAAG,CAAC,CAACC;YAChD,IAAIX,WAAWY,IAAI,KAAK,WAAW;gBACjC,OAAOD,KAAKb,KAAK,GAAG;YACtB;YACA,OAAOa,KAAKb,KAAK,GAAGI;QACtB;QACAO,UAAUI,IAAI,CAACL;QAEf,MAAMM,YAAYd,WAAWH,KAAK,CAACa,GAAG,CAAC,CAACC,MAAmBI,QAAUJ,KAAKK,KAAK,IAAIb,QAAQA,OAAO,CAACY,MAAM;QACzGD,UAAUG,OAAO,CAACb;QAElB,MAAMc,YAAYvB,IAAIc,WAAWK;QACjC,OAAOI,UAAUR,GAAG,CAAC,CAACS;YACpB,MAAMC,kBAAkBD,IAAI,CAAC,EAAE,IAAIX;YACnC,MAAMa,kBAAkBF,IAAI,CAAC,EAAE,IAAIf;YACnC,OAAO;gBAACgB;gBAAiBC;aAAgB;QAC3C;IACF,OAAO;QACL,OAAOf;IACT;AACF"}