tvision-charts-component 3.3.24

package/dist/esm/basicBar/_example/VerticalWaterfallBar.js

@@ -0,0 +1,100 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+export default function VerticalWaterfallBar() {
+    var options = {
+        tooltip: {
+            trigger: 'axis',
+            show: true,
+            itemSelect: true,
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: '#e5e5e5',
+                },
+            },
+            formatter: function (params) {
+                var tar = params[1];
+                return "".concat(tar.axisValueLabel, "<br/>").concat(tar.seriesName, " : ").concat(tar.value);
+            },
+        },
+        legend: {
+            orient: 'vertical',
+            align: 'left',
+            show: false,
+        },
+        grid: { left: 0, right: 20, bottom: 10, top: 0, containLabel: false },
+        xAxis: {
+            boundaryGap: true,
+            axisLabel: {
+                inside: false,
+                show: true,
+            },
+            type: 'category',
+            data: ['总耗时', '函数1', '函数2', '函数3', '函数3', '函数5', '函数6'],
+            axisTick: {
+                alignWithLabel: true,
+            },
+        },
+        yAxis: [
+            {
+                type: 'value',
+                axisLine: { show: true, inside: false },
+                position: 'top',
+                axisLabel: {
+                    show: true,
+                    inside: false,
+                    margin: 8,
+                    formatter: function (params) {
+                        return "".concat(params, "ms");
+                    },
+                },
+                containerDomId: 'axisDomId',
+            },
+        ],
+        dataSource: [
+            {
+                name: '辅助',
+                type: 'bar',
+                stack: 'a',
+                barWidth: '30%',
+                itemStyle: {
+                    barBorderColor: '#ffff',
+                    color: 'rgba(0,0,0,0)',
+                },
+                emphasis: {
+                    itemStyle: {
+                        barBorderColor: 'rgba(0,0,0,0)',
+                        color: 'rgba(0,0,0,0)',
+                    },
+                },
+                data: [0, 1700, 1400, 1200, 300, 200, 0],
+            },
+            {
+                name: '耗时',
+                type: 'bar',
+                stack: 'a',
+                barWidth: '30%',
+                itemStyle: {
+                    barBorderColor: '#ffff',
+                    color: [
+                        'rgba(82, 157, 255, 0.9)',
+                        'rgba(120, 189, 109, 0.9)',
+                        'rgba(99, 205, 214, 0.9)',
+                        'rgba(114, 105, 240, 0.9)',
+                        'rgba(55, 191, 134, 0.9)',
+                        'rgba(255, 127, 71, 0.9)',
+                        'rgba(245, 78, 78, 0.9)',
+                        'rgba(164, 99, 214, 0.9)',
+                        'rgba( 219, 75, 142, 0.9)',
+                    ],
+                },
+                data: [2900, 1200, 3, 200, 900, 100, 200],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u7AD6\u76F4\u7684\u7011\u5E03\u6D41\u56FE"),
+        React.createElement(BasicBar, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=VerticalWaterfallBar.js.map

package/dist/esm/basicBar/_example/VerticalWaterfallBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalWaterfallBar.js","sourceRoot":"","sources":["../../../../src/basicBar/_example/VerticalWaterfallBar.jsx"],"names":[],"mappings":"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"}

package/dist/esm/basicBar/_example/VerticalWaterfallBar.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+
+export default function VerticalWaterfallBar() {
+  const options = {
+    // color: ['#3398DB'],
+    tooltip: {
+      trigger: 'axis',
+      show: true,
+      itemSelect: true,
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          color: '#e5e5e5',
+        },
+      },
+      formatter(params) {
+        const tar = params[1];
+        // debugger
+        return `${tar.axisValueLabel}<br/>${tar.seriesName} : ${tar.value}`;
+      },
+    },
+    legend: {
+      orient: 'vertical',
+      align: 'left',
+      show: false,
+    },
+    grid: { left: 0, right: 20, bottom: 10, top: 0, containLabel: false },
+    xAxis: {
+      boundaryGap: true,
+      axisLabel: {
+        inside: false,
+        show: true,
+        //     formatter: function (params) {
+        //     var tar = params[1];
+        //     // debugger
+        //     return '';
+        // }
+      },
+      type: 'category',
+      data: ['总耗时', '函数1', '函数2', '函数3', '函数3', '函数5', '函数6'],
+      axisTick: {
+        alignWithLabel: true,
+      },
+      // inverse: false,
+    },
+    yAxis: [
+      {
+        type: 'value',
+        axisLine: { show: true, inside: false }, // 轴
+        position: 'top',
+        // 精度调节
+        axisLabel: {
+          show: true,
+          inside: false,
+          margin: 8,
+          formatter(params) {
+            // debugger
+            return `${params}ms`;
+          },
+        },
+        // 坐标轴所在的容器
+        containerDomId: 'axisDomId',
+      },
+    ],
+    dataSource: [
+      {
+        name: '辅助',
+        type: 'bar',
+        stack: 'a',
+        barWidth: '30%',
+        itemStyle: {
+          barBorderColor: '#ffff',
+          color: 'rgba(0,0,0,0)',
+        },
+        emphasis: {
+          itemStyle: {
+            barBorderColor: 'rgba(0,0,0,0)',
+            color: 'rgba(0,0,0,0)',
+          },
+        },
+        data: [0, 1700, 1400, 1200, 300, 200, 0],
+      },
+      {
+        name: '耗时',
+        type: 'bar',
+        stack: 'a',
+        barWidth: '30%',
+        itemStyle: {
+          barBorderColor: '#ffff',
+          // color支持“字符串”和“数组”两种类型
+          color: [
+            'rgba(82, 157, 255, 0.9)',
+            'rgba(120, 189, 109, 0.9)',
+            'rgba(99, 205, 214, 0.9)',
+            'rgba(114, 105, 240, 0.9)',
+            'rgba(55, 191, 134, 0.9)',
+            'rgba(255, 127, 71, 0.9)',
+            'rgba(245, 78, 78, 0.9)',
+            'rgba(164, 99, 214, 0.9)',
+            'rgba( 219, 75, 142, 0.9)',
+          ],
+          // color: 'rgba(82, 157, 255, 0.9)',
+        },
+        data: [2900, 1200, 3, 200, 900, 100, 200],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>竖直的瀑布流图</div>
+      <BasicBar height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicBar/_example/WaterfallHoverBar.d.ts

@@ -0,0 +1 @@
+export default function FixedWidthBar(): JSX.Element;

package/dist/esm/basicBar/_example/WaterfallHoverBar.js

@@ -0,0 +1,134 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+export default function FixedWidthBar() {
+    var options = {
+        color: ['#3398DB'],
+        dataZoom: [{ start: 0 }, { type: 'inside' }],
+        tooltip: {
+            trigger: 'axis',
+            show: true,
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: '#e5e5e5',
+                },
+                clickStyle: {
+                    color: '#CED1F8',
+                },
+            },
+            formatter: function (params) {
+                var tar = params[1];
+                return "".concat(tar.axisValueLabel, "<br/>").concat(tar.seriesName, " : ").concat(tar.value);
+            },
+            itemSelect: true,
+        },
+        legend: {
+            orient: 'vertical',
+            show: false,
+        },
+        grid: { left: 0, right: 20, bottom: 0, top: 0, containLabel: false },
+        yAxis: {
+            boundaryGap: true,
+            axisLabel: {
+                inside: false,
+                show: false,
+                formatter: function () {
+                    return '';
+                },
+            },
+            type: 'category',
+            data: [
+                '总耗时',
+                '函数1',
+                '函数2',
+                '函数3',
+                '函数3',
+                '函数5',
+                '函数6',
+                '函数7',
+                '函数8',
+                '函数9',
+                '函数10',
+                '函数11',
+                '函数12',
+                '函数13',
+                '函数14',
+                '函数15',
+                '函数16',
+                '函数17',
+                '函数18',
+                '函数19',
+                '函数20',
+            ],
+            axisTick: {
+                alignWithLabel: true,
+            },
+            inverse: true,
+        },
+        xAxis: [
+            {
+                type: 'value',
+                axisLine: { show: true, inside: false },
+                position: 'top',
+                axisLabel: {
+                    show: true,
+                    inside: false,
+                    margin: 8,
+                    position: 'left',
+                    formatter: function (params) {
+                        return "".concat(params, "ms");
+                    },
+                },
+                containerDomId: 'axisDomId',
+            },
+        ],
+        dataSource: [
+            {
+                name: '辅助',
+                type: 'bar',
+                stack: 'a',
+                barWidth: '60%',
+                itemStyle: {
+                    barBorderColor: '#ffff',
+                    color: 'rgba(0,0,0,0)',
+                },
+                emphasis: {
+                    itemStyle: {
+                        barBorderColor: 'rgba(0,0,0,0)',
+                        color: 'rgba(0,0,0,0)',
+                    },
+                },
+                data: [0, 1700, 1400, 1200, 300, 200, 0, 400, 500, 300, 100, 200, 300, 600, 400, 600, 700, 800, 200, 500, 500],
+            },
+            {
+                name: '耗时',
+                type: 'bar',
+                stack: 'a',
+                barWidth: '60%',
+                showBackground: true,
+                itemStyle: {
+                    barBorderColor: '#ffff',
+                    color: [
+                        'rgba(82, 157, 255, 0.9)',
+                        'rgba(120, 189, 109, 0.9)',
+                        'rgba(99, 205, 214, 0.9)',
+                        'rgba(114, 105, 240, 0.9)',
+                        'rgba(55, 191, 134, 0.9)',
+                        'rgba(255, 127, 71, 0.9)',
+                        'rgba(245, 78, 78, 0.9)',
+                        'rgba(164, 99, 214, 0.9)',
+                        'rgba( 219, 75, 142, 0.9)',
+                    ],
+                },
+                data: [
+                    2900, 1200, 30, 200, 900, 100, 200, 500, 200, 600, 400, 8000, 300, 500, 300, 100, 150, 500, 300, 100, 1000,
+                ],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u9E1F\u77B0\u56FE\u6A21\u5F0F"),
+        React.createElement(BasicBar, __assign({ height: 250 }, options))));
+}
+//# sourceMappingURL=WaterfallHoverBar.js.map

package/dist/esm/basicBar/_example/WaterfallHoverBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaterfallHoverBar.js","sourceRoot":"","sources":["../../../../src/basicBar/_example/WaterfallHoverBar.jsx"],"names":[],"mappings":"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"}

package/dist/esm/basicBar/_example/WaterfallHoverBar.jsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+
+export default function FixedWidthBar() {
+  const options = {
+    color: ['#3398DB'],
+    dataZoom: [{ start: 0 }, { type: 'inside' }],
+    tooltip: {
+      trigger: 'axis',
+      show: true,
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+        shadowStyle: {
+          color: '#e5e5e5',
+        },
+        clickStyle: {
+          color: '#CED1F8',
+        },
+      },
+      formatter(params) {
+        const tar = params[1];
+        return `${tar.axisValueLabel}<br/>${tar.seriesName} : ${tar.value}`;
+      },
+      itemSelect: true,
+    },
+    legend: {
+      orient: 'vertical',
+      show: false,
+    },
+    grid: { left: 0, right: 20, bottom: 0, top: 0, containLabel: false },
+    yAxis: {
+      boundaryGap: true,
+      axisLabel: {
+        inside: false,
+        show: false,
+        formatter() {
+          // debugger
+          return '';
+        },
+      },
+      type: 'category',
+      data: [
+        '总耗时',
+        '函数1',
+        '函数2',
+        '函数3',
+        '函数3',
+        '函数5',
+        '函数6',
+        '函数7',
+        '函数8',
+        '函数9',
+        '函数10',
+        '函数11',
+        '函数12',
+        '函数13',
+        '函数14',
+        '函数15',
+        '函数16',
+        '函数17',
+        '函数18',
+        '函数19',
+        '函数20',
+      ],
+      axisTick: {
+        alignWithLabel: true,
+      },
+      inverse: true,
+    },
+    xAxis: [
+      {
+        type: 'value',
+        axisLine: { show: true, inside: false }, // 轴
+        position: 'top',
+        // 精度调节
+        axisLabel: {
+          show: true,
+          inside: false,
+          margin: 8,
+          position: 'left',
+          formatter(params) {
+            // debugger
+            return `${params}ms`;
+          },
+        },
+        // 坐标轴所在的容器
+        containerDomId: 'axisDomId',
+      },
+    ],
+    dataSource: [
+      {
+        name: '辅助',
+        type: 'bar',
+        stack: 'a',
+        barWidth: '60%',
+        // showBackground: true,
+        // backgroundStyle: {
+        //     color: 'rgba(180, 180, 180, 0.2)'
+        // },
+        itemStyle: {
+          barBorderColor: '#ffff',
+          color: 'rgba(0,0,0,0)',
+        },
+        emphasis: {
+          itemStyle: {
+            barBorderColor: 'rgba(0,0,0,0)',
+            color: 'rgba(0,0,0,0)',
+          },
+        },
+        data: [0, 1700, 1400, 1200, 300, 200, 0, 400, 500, 300, 100, 200, 300, 600, 400, 600, 700, 800, 200, 500, 500],
+        // data: [0]
+      },
+      {
+        name: '耗时',
+        type: 'bar',
+        stack: 'a',
+        barWidth: '60%',
+        showBackground: true,
+        // backgroundStyle: {
+        //     color: 'rgba(180, 180, 180, 0.2)',
+        //     interval: true,
+        // },
+        itemStyle: {
+          barBorderColor: '#ffff',
+          // color支持“字符串”和“数组”两种类型
+          color: [
+            'rgba(82, 157, 255, 0.9)',
+            'rgba(120, 189, 109, 0.9)',
+            'rgba(99, 205, 214, 0.9)',
+            'rgba(114, 105, 240, 0.9)',
+            'rgba(55, 191, 134, 0.9)',
+            'rgba(255, 127, 71, 0.9)',
+            'rgba(245, 78, 78, 0.9)',
+            'rgba(164, 99, 214, 0.9)',
+            'rgba( 219, 75, 142, 0.9)',
+          ],
+        },
+        data: [
+          2900, 1200, 30, 200, 900, 100, 200, 500, 200, 600, 400, 8000, 300, 500, 300, 100, 150, 500, 300, 100, 1000,
+        ],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>鸟瞰图模式</div>
+      <BasicBar height={250} {...options} />
+    </>
+  );
+}

package/dist/esm/basicBar/_example/WaterfallZebraBar.d.ts

@@ -0,0 +1 @@
+export default function Basic(): JSX.Element;

package/dist/esm/basicBar/_example/WaterfallZebraBar.js

@@ -0,0 +1,122 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicBar } from '@tencent/tcharts-component';
+export default function Basic() {
+    var options = {
+        color: ['#3398DB'],
+        dataZoom: [{ start: 0 }, { type: 'inside' }],
+        tooltip: {
+            trigger: 'axis',
+            show: true,
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: '#e5e5e5',
+                },
+                clickStyle: {
+                    color: '#CED1F8',
+                },
+            },
+            formatter: function (params) {
+                var tar = params[1];
+                return "".concat(tar.axisValueLabel, "<br/>").concat(tar.seriesName, " : ").concat(tar.value);
+            },
+            itemSelect: true,
+        },
+        legend: {
+            orient: 'vertical',
+            x: 'left',
+            show: false,
+        },
+        grid: { left: 0, right: 20, bottom: 0, top: 0, containLabel: false },
+        yAxis: {
+            boundaryGap: true,
+            axisLabel: {
+                inside: false,
+                show: false,
+                formatter: function () {
+                    return '';
+                },
+            },
+            type: 'category',
+            data: ['总耗时', '函数1', '函数2', '函数3', '函数3', '函数5', '函数6'],
+            axisTick: {
+                alignWithLabel: true,
+            },
+            inverse: true,
+        },
+        xAxis: [
+            {
+                type: 'value',
+                axisLine: { show: true, inside: false },
+                position: 'top',
+                axisLabel: {
+                    show: true,
+                    inside: false,
+                    margin: 8,
+                    position: 'left',
+                    formatter: function (params) {
+                        return "".concat(params, "ms");
+                    },
+                },
+                containerDomId: 'axisDomId',
+            },
+        ],
+        dataSource: [
+            {
+                name: '辅助',
+                type: 'bar',
+                stack: 'a',
+                barWidth: '60%',
+                itemStyle: {
+                    barBorderColor: '#ffff',
+                    color: 'rgba(0,0,0,0)',
+                },
+                emphasis: {
+                    itemStyle: {
+                        barBorderColor: 'rgba(0,0,0,0)',
+                        color: 'rgba(0,0,0,0)',
+                    },
+                },
+                data: [0, 1700, 1400, 1200, 300, 200, 0],
+            },
+            {
+                name: '耗时',
+                type: 'bar',
+                stack: 'a',
+                barWidth: '60%',
+                showBackground: true,
+                backgroundStyle: {
+                    color: 'rgba(180, 180, 180, 0.2)',
+                    interval: true,
+                },
+                itemStyle: {
+                    barBorderColor: '#ffff',
+                    color: [
+                        'rgba(82, 157, 255, 0.9)',
+                        'rgba(120, 189, 109, 0.9)',
+                        'rgba(99, 205, 214, 0.9)',
+                        'rgba(114, 105, 240, 0.9)',
+                        'rgba(55, 191, 134, 0.9)',
+                        'rgba(255, 127, 71, 0.9)',
+                        'rgba(245, 78, 78, 0.9)',
+                        'rgba(164, 99, 214, 0.9)',
+                        'rgba( 219, 75, 142, 0.9)',
+                    ],
+                },
+                label: {
+                    show: true,
+                    position: 'right',
+                    formatter: function (params) {
+                        return "".concat(params, "ms");
+                    },
+                },
+                data: [2900, 1200, 3, 200, 900, 100, 200],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u5E26\u6709\u6591\u9A6C\u7EB9"),
+        React.createElement(BasicBar, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=WaterfallZebraBar.js.map

package/dist/esm/basicBar/_example/WaterfallZebraBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaterfallZebraBar.js","sourceRoot":"","sources":["../../../../src/basicBar/_example/WaterfallZebraBar.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,KAAK;IAC3B,IAAM,OAAO,GAAG;QACd,KAAK,EAAE,CAAC,SAAS,CAAC;QAClB,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;QAC5C,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,IAAI;YACV,WAAW,EAAE;gBAEX,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE;oBACX,KAAK,EAAE,SAAS;iBACjB;gBACD,UAAU,EAAE;oBACV,KAAK,EAAE,SAAS;iBACjB;aACF;YACD,SAAS,YAAC,MAAM;gBACd,IAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;gBACtB,OAAO,UAAG,GAAG,CAAC,cAAc,kBAAQ,GAAG,CAAC,UAAU,gBAAM,GAAG,CAAC,KAAK,CAAE,CAAC;YACtE,CAAC;YACD,UAAU,EAAE,IAAI;SACjB;QACD,MAAM,EAAE;YACN,MAAM,EAAE,UAAU;YAClB,CAAC,EAAE,MAAM;YACT,IAAI,EAAE,KAAK;SACZ;QACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE;QACpE,KAAK,EAAE;YACL,WAAW,EAAE,IAAI;YACjB,SAAS,EAAE;gBACT,MAAM,EAAE,KAAK;gBACb,IAAI,EAAE,KAAK;gBACX,SAAS;oBAEP,OAAO,EAAE,CAAC;gBACZ,CAAC;aACF;YACD,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;YACvD,QAAQ,EAAE;gBACR,cAAc,EAAE,IAAI;aACrB;YACD,OAAO,EAAE,IAAI;SACd;QACD,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;gBACvC,QAAQ,EAAE,KAAK;gBAEf,SAAS,EAAE;oBACT,IAAI,EAAE,IAAI;oBACV,MAAM,EAAE,KAAK;oBACb,MAAM,EAAE,CAAC;oBACT,QAAQ,EAAE,MAAM;oBAChB,SAAS,YAAC,MAAM;wBAEd,OAAO,UAAG,MAAM,OAAI,CAAC;oBACvB,CAAC;iBACF;gBAED,cAAc,EAAE,WAAW;aAC5B;SACF;QACD,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,IAAI;gBACV,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,GAAG;gBACV,QAAQ,EAAE,KAAK;gBAKf,SAAS,EAAE;oBACT,cAAc,EAAE,OAAO;oBACvB,KAAK,EAAE,eAAe;iBACvB;gBACD,QAAQ,EAAE;oBACR,SAAS,EAAE;wBACT,cAAc,EAAE,eAAe;wBAC/B,KAAK,EAAE,eAAe;qBACvB;iBACF;gBACD,IAAI,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;aAEzC;YACD;gBACE,IAAI,EAAE,IAAI;gBACV,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,GAAG;gBACV,QAAQ,EAAE,KAAK;gBACf,cAAc,EAAE,IAAI;gBACpB,eAAe,EAAE;oBACf,KAAK,EAAE,0BAA0B;oBACjC,QAAQ,EAAE,IAAI;iBACf;gBACD,SAAS,EAAE;oBACT,cAAc,EAAE,OAAO;oBAEvB,KAAK,EAAE;wBACL,yBAAyB;wBACzB,0BAA0B;wBAC1B,yBAAyB;wBACzB,0BAA0B;wBAC1B,yBAAyB;wBACzB,yBAAyB;wBACzB,wBAAwB;wBACxB,yBAAyB;wBACzB,0BAA0B;qBAC3B;iBAEF;gBACD,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,QAAQ,EAAE,OAAO;oBACjB,SAAS,YAAC,MAAM;wBACd,OAAO,UAAG,MAAM,OAAI,CAAC;oBACvB,CAAC;iBACF;gBACD,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;aAC1C;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,QAAQ,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACrC,CACJ,CAAC;AACJ,CAAC"}