playbook_ui 14.24.0 → 14.25.0.pre.alpha.testingcss9700

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

@@ -0,0 +1,544 @@
+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
+};