playbook_ui 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9713

data/dist/chunks/_line_graph-DPTwfQR-.js

@@ -1,544 +0,0 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { b as buildAriaProps, c as buildDataProps, d as buildHtmlProps, H as HighchartsReact, e as Highcharts, f as classnames, g as globalProps, h as HighchartsMore, S as SolidGauge, i as buildCss } from "./_typeahead-CEqlHw0H.js";
-import { c as colors, h as highchartsTheme, m as merge, a as highchartsDarkTheme, t as typography } from "./lib-CIetbXpr.js";
-const mapColors = (array) => {
-  const regex = /(data)\-[1-8]/;
-  const newArray = array.map((item) => {
-    return regex.test(item) ? `${colors[`data_${item[item.length - 1]}`]}` : item;
-  });
-  return newArray;
-};
-const BarGraph = ({
-  aria = {},
-  data = {},
-  align = "center",
-  axisTitle,
-  dark = false,
-  chartData,
-  className = "pb_bar_graph",
-  colors: colors2,
-  htmlOptions = {},
-  customOptions = {},
-  axisFormat,
-  id,
-  pointStart,
-  stacking,
-  subTitle,
-  type = "column",
-  title = "Title",
-  xAxisCategories,
-  yAxisMin,
-  yAxisMax,
-  legend = false,
-  toggleLegendClick = true,
-  height,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const setupTheme = () => {
-    dark ? Highcharts.setOptions(highchartsDarkTheme) : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-  const staticOptions = {
-    title: {
-      text: title
-    },
-    chart: {
-      height,
-      type
-    },
-    subtitle: {
-      text: subTitle
-    },
-    yAxis: [{
-      labels: {
-        format: typeof axisFormat === "string" ? axisFormat : axisFormat && axisFormat[0] ? axisFormat[0].format : ""
-      },
-      min: yAxisMin,
-      max: yAxisMax,
-      opposite: false,
-      title: {
-        text: Array.isArray(axisTitle) ? axisTitle.length > 0 ? axisTitle[0].name : null : axisTitle
-      },
-      plotLines: typeof yAxisMin !== "undefined" && yAxisMin !== null ? [] : [{
-        value: 0,
-        zIndex: 10,
-        color: "#E4E8F0"
-      }]
-    }],
-    xAxis: {
-      categories: xAxisCategories
-    },
-    legend: {
-      enabled: legend,
-      align,
-      verticalAlign,
-      layout,
-      x,
-      y
-    },
-    colors: colors2 !== void 0 && colors2.length > 0 ? mapColors(colors2) : highchartsTheme.colors,
-    plotOptions: {
-      series: {
-        stacking,
-        pointStart,
-        borderWidth: stacking ? 0 : "",
-        events: {},
-        dataLabels: {
-          enabled: false
-        }
-      }
-    },
-    series: chartData,
-    credits: false
-  };
-  if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
-    staticOptions.yAxis.push({
-      labels: {
-        format: typeof axisFormat === "string" ? axisFormat : axisFormat[1].format
-      },
-      min: yAxisMin,
-      max: yAxisMax,
-      opposite: true,
-      title: {
-        text: axisTitle[1].name
-      },
-      plotLines: typeof yAxisMin !== "undefined" && yAxisMin !== null ? [] : [{
-        value: 0,
-        zIndex: 10,
-        color: "#E4E8F0"
-      }]
-    });
-  }
-  if (!toggleLegendClick) {
-    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
-  }
-  const filteredProps = { ...props };
-  delete filteredProps.verticalAlign;
-  const [options, setOptions] = useState({});
-  useEffect(() => {
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
-  return /* @__PURE__ */ jsx(
-    HighchartsReact,
-    {
-      containerProps: {
-        className: classnames(globalProps(filteredProps), className),
-        id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps
-      },
-      highcharts: Highcharts,
-      options
-    }
-  );
-};
-const alignBlockElement = (event) => {
-  const itemToMove = document.querySelector(
-    `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
-  );
-  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
-  if (itemToMove !== null && chartContainer !== null) {
-    itemToMove.style.height = `${event.target.chartHeight}px`;
-    itemToMove.style.width = `${event.target.chartWidth}px`;
-    if (chartContainer.firstChild !== null) {
-      chartContainer.firstChild.before(itemToMove);
-    }
-  }
-};
-const CircleChart = ({
-  align = "center",
-  aria = {},
-  rounded = false,
-  borderColor = rounded ? null : "",
-  borderWidth = rounded ? 20 : null,
-  chartData,
-  children,
-  className,
-  colors: colors2 = [],
-  customOptions = {},
-  dark = false,
-  data = {},
-  dataLabelHtml = "<div>{point.name}</div>",
-  dataLabels = false,
-  height,
-  htmlOptions = {},
-  id,
-  innerSize = "md",
-  legend = false,
-  maxPointSize = null,
-  minPointSize = null,
-  startAngle = null,
-  style = "pie",
-  title,
-  tooltipHtml,
-  useHtml = false,
-  zMin = null,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  HighchartsMore(Highcharts);
-  const setupTheme = () => {
-    dark ? Highcharts.setOptions(highchartsDarkTheme) : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-  Highcharts.setOptions({
-    tooltip: {
-      headerFormat: null,
-      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',
-      useHTML: useHtml
-    }
-  });
-  const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
-  const innerSizeFormat = (size) => innerSizes[size];
-  const filteredProps = { ...props };
-  delete filteredProps.verticalAlign;
-  const [options, setOptions] = useState({});
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-    const staticOptions = {
-      title: {
-        text: title
-      },
-      chart: {
-        height,
-        type: style,
-        events: {
-          render: (event) => alignBlockElement(event),
-          redraw: (event) => alignBlockElement(event)
-        }
-      },
-      legend: {
-        align,
-        verticalAlign,
-        layout,
-        x,
-        y
-      },
-      plotOptions: {
-        pie: {
-          colors: colors2.length > 0 ? mapColors(colors2) : highchartsTheme.colors,
-          dataLabels: {
-            enabled: dataLabels,
-            connectorShape: "straight",
-            connectorWidth: 3,
-            format: dataLabelHtml
-          },
-          showInLegend: legend
-        }
-      },
-      series: [
-        {
-          minPointSize,
-          maxPointSize,
-          innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
-          data: formattedChartData,
-          zMin,
-          startAngle,
-          borderWidth,
-          borderColor
-        }
-      ],
-      credits: false
-    };
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
-  return /* @__PURE__ */ jsx(Fragment, { children: children ? /* @__PURE__ */ jsxs("div", { id: `wrapper-circle-chart-${id}`, children: [
-    /* @__PURE__ */ jsx(
-      HighchartsReact,
-      {
-        containerProps: {
-          className: classnames("pb_circle_chart", globalProps(filteredProps)),
-          id,
-          ...ariaProps,
-          ...dataProps,
-          ...htmlProps
-        },
-        highcharts: Highcharts,
-        options
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "pb-circle-chart-block", children })
-  ] }) : /* @__PURE__ */ jsx(
-    HighchartsReact,
-    {
-      containerProps: {
-        className: classnames("pb_circle_chart", globalProps(filteredProps)),
-        id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps
-      },
-      highcharts: Highcharts,
-      options
-    }
-  ) });
-};
-const Gauge = ({
-  aria = {},
-  chartData,
-  customOptions = {},
-  dark = false,
-  data = {},
-  disableAnimation = false,
-  fullCircle = false,
-  height = null,
-  htmlOptions = {},
-  id,
-  max = 100,
-  min = 0,
-  prefix = "",
-  showLabels = false,
-  style = "solidgauge",
-  suffix = "",
-  title = "",
-  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',
-  colors: colors$1 = [],
-  minorTickInterval = null,
-  circumference = fullCircle ? [0, 360] : [-100, 100],
-  ...props
-}) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  HighchartsMore(Highcharts);
-  SolidGauge(Highcharts);
-  const setupTheme = () => {
-    dark ? Highcharts.setOptions(highchartsDarkTheme) : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-  Highcharts.setOptions({
-    tooltip: {
-      pointFormat: tooltipHtml,
-      followPointer: true
-    }
-  });
-  const css = buildCss({
-    pb_gauge_kit: true
-  });
-  const [options, setOptions] = useState({});
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-    const staticOptions = {
-      chart: {
-        events: {
-          load() {
-            setTimeout(this.reflow.bind(this), 0);
-          }
-        },
-        type: style,
-        height
-      },
-      title: {
-        text: title
-      },
-      yAxis: {
-        min,
-        max,
-        lineWidth: 0,
-        tickWidth: 0,
-        minorTickInterval,
-        tickAmount: 2,
-        tickPositions: [min, max],
-        labels: {
-          y: 26,
-          enabled: showLabels
-        }
-      },
-      credits: false,
-      series: [
-        {
-          data: formattedChartData
-        }
-      ],
-      pane: {
-        center: ["50%", "50%"],
-        size: "90%",
-        startAngle: circumference[0],
-        endAngle: circumference[1],
-        background: {
-          borderWidth: 20,
-          innerRadius: "90%",
-          outerRadius: "90%",
-          shape: "arc",
-          className: "gauge-pane"
-        }
-      },
-      colors: colors$1 !== void 0 && colors$1.length > 0 ? mapColors(colors$1) : highchartsTheme.colors,
-      plotOptions: {
-        series: {
-          animation: !disableAnimation
-        },
-        solidgauge: {
-          borderColor: colors$1 !== void 0 && colors$1.length === 1 ? mapColors(colors$1).join() : highchartsTheme.colors[0],
-          borderWidth: 20,
-          radius: 90,
-          innerRadius: "90%",
-          dataLabels: {
-            borderWidth: 0,
-            color: colors.text_lt_default,
-            enabled: true,
-            format: `<span class="prefix${dark ? " dark" : ""}">${prefix}</span><span class="fix${dark ? " dark" : ""}">{y:,f}</span><span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
-            style: {
-              fontFamily: typography.font_family_base,
-              fontWeight: typography.regular,
-              fontSize: typography.heading_2
-            },
-            y: -26
-          }
-        }
-      }
-    };
-    setOptions(merge(staticOptions, customOptions));
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix2) => {
-        prefix2.setAttribute("y", "28");
-      });
-      document.querySelectorAll(".fix").forEach((fix) => fix.setAttribute("y", "38"));
-    }
-  }, [chartData]);
-  return /* @__PURE__ */ jsx(
-    HighchartsReact,
-    {
-      containerProps: {
-        className: classnames(css, globalProps(props)),
-        id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps
-      },
-      highcharts: Highcharts,
-      options
-    }
-  );
-};
-const LineGraph = ({
-  aria = {},
-  data = {},
-  align = "center",
-  className = "pb_bar_graph",
-  customOptions = {},
-  dark = false,
-  gradient = false,
-  type = "line",
-  htmlOptions = {},
-  id,
-  legend = false,
-  toggleLegendClick = true,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  axisTitle,
-  xAxisCategories,
-  yAxisMin,
-  yAxisMax,
-  chartData,
-  pointStart,
-  subTitle,
-  title,
-  height,
-  colors: colors2 = [],
-  ...props
-}) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const setupTheme = () => {
-    dark ? Highcharts.setOptions(highchartsDarkTheme) : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-  const staticOptions = {
-    title: {
-      text: title
-    },
-    chart: {
-      height,
-      type
-    },
-    subtitle: {
-      text: subTitle
-    },
-    yAxis: {
-      min: yAxisMin,
-      max: yAxisMax,
-      title: {
-        text: axisTitle
-      }
-    },
-    xAxis: {
-      categories: xAxisCategories
-    },
-    legend: {
-      enabled: legend,
-      align,
-      verticalAlign,
-      layout,
-      x,
-      y
-    },
-    colors: colors2 !== void 0 && colors2.length > 0 ? mapColors(colors2) : highchartsTheme.colors,
-    plotOptions: {
-      series: {
-        pointStart,
-        events: {},
-        dataLabels: {
-          enabled: false
-        }
-      }
-    },
-    series: chartData,
-    credits: false
-  };
-  if (!toggleLegendClick) {
-    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
-  }
-  const filteredProps = { ...props };
-  delete filteredProps.verticalAlign;
-  const [options, setOptions] = useState({});
-  useEffect(() => {
-    setOptions(merge(staticOptions, customOptions));
-  }, [chartData]);
-  return /* @__PURE__ */ jsx(
-    HighchartsReact,
-    {
-      containerProps: {
-        className: classnames(globalProps(filteredProps), className),
-        id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps
-      },
-      highcharts: Highcharts,
-      options
-    }
-  );
-};
-export {
-  BarGraph as B,
-  CircleChart as C,
-  Gauge as G,
-  LineGraph as L
-};