@cubejs-backend/server-core 0.28.49 → 0.28.53

package/playground/chart-renderers/react/static/js/main.faf2c4e3.chunk.js

@@ -1 +0,0 @@
-(this["webpackJsonpreact-charts"]=this["webpackJsonpreact-charts"]||[]).push([[0],{660:function(e,n,t){},810:function(e,n,t){},951:function(e,n,t){"use strict";t.r(n);var r={};t.r(r),t.d(r,"getChartComponent",(function(){return h})),t.d(r,"getCommon",(function(){return v})),t.d(r,"getImports",(function(){return j}));var a={};t.r(a),t.d(a,"getChartComponent",(function(){return C})),t.d(a,"getCommon",(function(){return x})),t.d(a,"getImports",(function(){return S}));var o={};t.r(o),t.d(o,"getChartComponent",(function(){return O})),t.d(o,"getCommon",(function(){return k})),t.d(o,"getImports",(function(){return R}));var i={};t.r(i),t.d(i,"getChartComponent",(function(){return A})),t.d(i,"getCommon",(function(){return F})),t.d(i,"getImports",(function(){return I}));var s=t(0),u=t.n(s),c=t(37),l=t.n(c),d=(t(660),t(16)),p=t(281),m=t(282),f=(t(809),t(810),t(26)),b=["import React from 'react';","import { Chart, Axis, Tooltip, Geom, PieChart } from 'bizcharts';","import { useDeepCompareMemo } from 'use-deep-compare';","import { Row, Col, Statistic, Table } from 'antd';"];function h(e){return"line"===e?"return <LineChartRenderer resultSet={resultSet} />;\n":"bar"===e?"return <BarChartRenderer resultSet={resultSet} pivotConfig={pivotConfig} />;\n":"area"===e?"return <AreaChartRenderer resultSet={resultSet} />;\n":"pie"===e?"return <PieChartRenderer resultSet={resultSet} />;\n":"number"===e?'return (\n  <Row\n    type="flex"\n    justify="center"\n    align="middle"\n    style={{\n      height: \'100%\',\n    }}\n  >\n    <Col>\n      {resultSet.seriesNames().map((s) => (\n        <Statistic value={resultSet.totalRow()[s.key]} />\n      ))}\n    </Col>\n  </Row>\n);\n':"height"===e?"":"table"===e?"return <TableRenderer resultSet={resultSet} pivotConfig={pivotConfig} />;\n":void 0}function v(){return'const stackedChartData = (resultSet) => {\n  const data = resultSet\n    .pivot()\n    .map(({ xValues, yValuesArray }) =>\n      yValuesArray.map(([yValues, m]) => ({\n        x: resultSet.axisValuesString(xValues, \', \'),\n        color: resultSet.axisValuesString(yValues, \', \'),\n        measure: m && Number.parseFloat(m),\n      }))\n    )\n    .reduce((a, b) => a.concat(b), []);\n  return data;\n};\n\nconst LineChartRenderer = ({ resultSet }) => {\n  const data = useDeepCompareMemo(\n    () => stackedChartData(resultSet),\n    [resultSet]\n  );\n  return (\n    <Chart\n      scale={{\n        x: {\n          tickCount: 8,\n        },\n      }}\n      autoFit\n      height={400}\n      data={data}\n      forceFit\n    >\n      <Axis name="x" />\n      <Axis name="measure" />\n      <Tooltip\n        crosshairs={{\n          type: \'y\',\n        }}\n      />\n      <Geom type="line" position="x*measure" size={2} color="color" />\n    </Chart>\n  );\n};\n\nconst BarChartRenderer = ({ resultSet, pivotConfig }) => {\n  const data = useDeepCompareMemo(\n    () => stackedChartData(resultSet),\n    [resultSet.serialize()]\n  );\n  const stacked = !(pivotConfig.x || []).includes(\'measures\');\n  return (\n    <Chart\n      scale={{\n        x: {\n          tickCount: 8,\n        },\n      }}\n      autoFit\n      height={400}\n      data={data}\n      forceFit\n    >\n      <Axis name="x" />\n      <Axis name="measure" />\n      <Tooltip />\n      <Geom\n        type="interval"\n        position="x*measure"\n        color="color"\n        adjust={stacked ? \'stack\' : \'dodge\'}\n      />\n    </Chart>\n  );\n};\n\nconst AreaChartRenderer = ({ resultSet }) => {\n  const data = useDeepCompareMemo(\n    () => stackedChartData(resultSet),\n    [resultSet.serialize()]\n  );\n  return (\n    <Chart\n      scale={{\n        x: {\n          tickCount: 8,\n        },\n      }}\n      autoFit\n      height={400}\n      data={data}\n      forceFit\n    >\n      <Axis name="x" />\n      <Axis name="measure" />\n      <Tooltip\n        crosshairs={{\n          type: \'y\',\n        }}\n      />\n      <Geom\n        type="area"\n        adjust="stack"\n        position="x*measure"\n        size={2}\n        color="color"\n      />\n    </Chart>\n  );\n};\n\nconst PieChartRenderer = ({ resultSet }) => {\n  const [data, angleField] = useDeepCompareMemo(() => {\n    return [resultSet.chartPivot(), resultSet.series()];\n  }, [resultSet]);\n  return (\n    <PieChart\n      data={data}\n      radius={0.8}\n      angleField={angleField[0].key}\n      colorField="x"\n      label={{\n        visible: true,\n        offset: 20,\n      }}\n      legend={{\n        position: \'bottom\',\n      }}\n    />\n  );\n};\n\nconst formatTableData = (columns, data) => {\n  function flatten(columns = []) {\n    return columns.reduce((memo, column) => {\n      if (column.children) {\n        return [...memo, ...flatten(column.children)];\n      }\n\n      return [...memo, column];\n    }, []);\n  }\n\n  const typeByIndex = flatten(columns).reduce((memo, column) => {\n    return { ...memo, [column.dataIndex]: column };\n  }, {});\n\n  function formatValue(value, { type, format } = {}) {\n    if (value == undefined) {\n      return value;\n    }\n\n    if (type === \'boolean\') {\n      return Boolean(value).toString();\n    }\n\n    if (type === \'number\' && format === \'percent\') {\n      return [parseFloat(value).toFixed(2), \'%\'].join(\'\');\n    }\n\n    return value.toString();\n  }\n\n  function format(row) {\n    return Object.fromEntries(\n      Object.entries(row).map(([dataIndex, value]) => {\n        return [dataIndex, formatValue(value, typeByIndex[dataIndex])];\n      })\n    );\n  }\n\n  return data.map(format);\n};\n\nconst TableRenderer = ({ resultSet, pivotConfig }) => {\n  const [tableColumns, dataSource] = useDeepCompareMemo(() => {\n    const columns = resultSet.tableColumns(pivotConfig);\n    return [\n      columns,\n      formatTableData(columns, resultSet.tablePivot(pivotConfig)),\n    ];\n  }, [resultSet, pivotConfig]);\n  return (\n    <Table pagination={false} columns={tableColumns} dataSource={dataSource} />\n  );\n};\n'}function j(){return b}var g=["import React from 'react';","import { CartesianGrid, PieChart, Pie, Cell, AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, BarChart, Bar, LineChart, Line } from 'recharts';","import { Row, Col, Statistic, Table } from 'antd';","import { useDeepCompareMemo } from 'use-deep-compare';"];function C(e){return"line"===e?'return (\n  <CartesianChart resultSet={resultSet} ChartComponent={LineChart}>\n    {resultSet.seriesNames().map((series, i) => (\n      <Line\n        key={series.key}\n        stackId="a"\n        dataKey={series.key}\n        name={series.title}\n        stroke={colors[i]}\n      />\n    ))}\n  </CartesianChart>\n);\n':"bar"===e?'return (\n  <CartesianChart resultSet={resultSet} ChartComponent={BarChart}>\n    {resultSet.seriesNames().map((series, i) => (\n      <Bar\n        key={series.key}\n        stackId="a"\n        dataKey={series.key}\n        name={series.title}\n        fill={colors[i]}\n      />\n    ))}\n  </CartesianChart>\n);\n':"area"===e?'return (\n  <CartesianChart resultSet={resultSet} ChartComponent={AreaChart}>\n    {resultSet.seriesNames().map((series, i) => (\n      <Area\n        key={series.key}\n        stackId="a"\n        dataKey={series.key}\n        name={series.title}\n        stroke={colors[i]}\n        fill={colors[i]}\n      />\n    ))}\n  </CartesianChart>\n);\n':"pie"===e?'return (\n  <ResponsiveContainer width="100%" height={350}>\n    <PieChart>\n      <Pie\n        isAnimationActive={false}\n        data={resultSet.chartPivot()}\n        nameKey="x"\n        dataKey={resultSet.seriesNames()[0].key}\n        fill="#8884d8"\n      >\n        {resultSet.chartPivot().map((e, index) => (\n          <Cell key={index} fill={colors[index % colors.length]} />\n        ))}\n      </Pie>\n      <Legend />\n      <Tooltip />\n    </PieChart>\n  </ResponsiveContainer>\n);\n':"number"===e?'return (\n  <Row\n    type="flex"\n    justify="center"\n    align="middle"\n    style={{\n      height: \'100%\',\n    }}\n  >\n    <Col>\n      {resultSet.seriesNames().map((s) => (\n        <Statistic value={resultSet.totalRow()[s.key]} />\n      ))}\n    </Col>\n  </Row>\n);\n':"height"===e?"":"table"===e?"return <TableRenderer resultSet={resultSet} pivotConfig={pivotConfig} />;\n":void 0}function x(){return"const CartesianChart = ({ resultSet, children, ChartComponent }) => (\n  <ResponsiveContainer width=\"100%\" height={350}>\n    <ChartComponent data={resultSet.chartPivot()}>\n      <XAxis dataKey=\"x\" />\n      <YAxis />\n      <CartesianGrid />\n      {children}\n      <Legend />\n      <Tooltip />\n    </ChartComponent>\n  </ResponsiveContainer>\n);\n\nconst colors = ['#FF6492', '#141446', '#7A77FF'];\n\nconst stackedChartData = (resultSet) => {\n  const data = resultSet\n    .pivot()\n    .map(({ xValues, yValuesArray }) =>\n      yValuesArray.map(([yValues, m]) => ({\n        x: resultSet.axisValuesString(xValues, ', '),\n        color: resultSet.axisValuesString(yValues, ', '),\n        measure: m && Number.parseFloat(m),\n      }))\n    )\n    .reduce((a, b) => a.concat(b), []);\n  return data;\n};\n\nconst formatTableData = (columns, data) => {\n  function flatten(columns = []) {\n    return columns.reduce((memo, column) => {\n      if (column.children) {\n        return [...memo, ...flatten(column.children)];\n      }\n\n      return [...memo, column];\n    }, []);\n  }\n\n  const typeByIndex = flatten(columns).reduce((memo, column) => {\n    return { ...memo, [column.dataIndex]: column };\n  }, {});\n\n  function formatValue(value, { type, format } = {}) {\n    if (value == undefined) {\n      return value;\n    }\n\n    if (type === 'boolean') {\n      return Boolean(value).toString();\n    }\n\n    if (type === 'number' && format === 'percent') {\n      return [parseFloat(value).toFixed(2), '%'].join('');\n    }\n\n    return value.toString();\n  }\n\n  function format(row) {\n    return Object.fromEntries(\n      Object.entries(row).map(([dataIndex, value]) => {\n        return [dataIndex, formatValue(value, typeByIndex[dataIndex])];\n      })\n    );\n  }\n\n  return data.map(format);\n};\n\nconst TableRenderer = ({ resultSet, pivotConfig }) => {\n  const [tableColumns, dataSource] = useDeepCompareMemo(() => {\n    const columns = resultSet.tableColumns(pivotConfig);\n    return [\n      columns,\n      formatTableData(columns, resultSet.tablePivot(pivotConfig)),\n    ];\n  }, [resultSet, pivotConfig]);\n  return (\n    <Table pagination={false} columns={tableColumns} dataSource={dataSource} />\n  );\n};\n"}function S(){return g}var y=["import React from 'react';","import { Line, Bar, Pie } from 'react-chartjs-2';","import { useDeepCompareMemo } from 'use-deep-compare';","import { Row, Col, Statistic, Table } from 'antd';"];function O(e){return"line"===e?"return <LineChartRenderer resultSet={resultSet} />;\n":"bar"===e?"return <BarChartRenderer resultSet={resultSet} pivotConfig={pivotConfig} />;\n":"area"===e?"return <AreaChartRenderer resultSet={resultSet} />;\n":"pie"===e?'const data = {\n  labels: resultSet.categories().map((c) => c.x),\n  datasets: resultSet.series().map((s) => ({\n    label: s.title,\n    data: s.series.map((r) => r.value),\n    backgroundColor: COLORS_SERIES,\n    hoverBackgroundColor: COLORS_SERIES,\n  })),\n};\nreturn <Pie type="pie" data={data} options={commonOptions} />;\n':"labels"===e||"datasets"===e||"label"===e||"data"===e||"backgroundColor"===e||"hoverBackgroundColor"===e?"":"number"===e?'return (\n  <Row\n    type="flex"\n    justify="center"\n    align="middle"\n    style={{\n      height: \'100%\',\n    }}\n  >\n    <Col>\n      {resultSet.seriesNames().map((s) => (\n        <Statistic value={resultSet.totalRow()[s.key]} />\n      ))}\n    </Col>\n  </Row>\n);\n':"height"===e?"":"table"===e?"return <TableRenderer resultSet={resultSet} pivotConfig={pivotConfig} />;\n":void 0}function k(){return"const COLORS_SERIES = [\n  '#5b8ff9',\n  '#5ad8a6',\n  '#5e7092',\n  '#f6bd18',\n  '#6f5efa',\n  '#6ec8ec',\n  '#945fb9',\n  '#ff9845',\n  '#299796',\n  '#fe99c3',\n];\nconst PALE_COLORS_SERIES = [\n  '#d7e3fd',\n  '#daf5e9',\n  '#d6dbe4',\n  '#fdeecd',\n  '#dad8fe',\n  '#dbf1fa',\n  '#e4d7ed',\n  '#ffe5d2',\n  '#cce5e4',\n  '#ffe6f0',\n];\nconst commonOptions = {\n  maintainAspectRatio: false,\n  interaction: {\n    intersect: false,\n  },\n  plugins: {\n    legend: {\n      position: 'bottom',\n    },\n  },\n  scales: {\n    x: {\n      ticks: {\n        autoSkip: true,\n        maxRotation: 0,\n        padding: 12,\n        minRotation: 0,\n      },\n    },\n  },\n};\n\nconst LineChartRenderer = ({ resultSet }) => {\n  const datasets = useDeepCompareMemo(\n    () =>\n      resultSet.series().map((s, index) => ({\n        label: s.title,\n        data: s.series.map((r) => r.value),\n        borderColor: COLORS_SERIES[index],\n        pointRadius: 1,\n        tension: 0.1,\n        pointHoverRadius: 1,\n        borderWidth: 2,\n        tickWidth: 1,\n        fill: false,\n      })),\n    [resultSet]\n  );\n  const data = {\n    labels: resultSet.categories().map((c) => c.x),\n    datasets,\n  };\n  return <Line type=\"line\" data={data} options={commonOptions} />;\n};\n\nconst BarChartRenderer = ({ resultSet, pivotConfig }) => {\n  const datasets = useDeepCompareMemo(\n    () =>\n      resultSet.series().map((s, index) => ({\n        label: s.title,\n        data: s.series.map((r) => r.value),\n        backgroundColor: COLORS_SERIES[index],\n        fill: false,\n      })),\n    [resultSet]\n  );\n  const data = {\n    labels: resultSet.categories().map((c) => c.x),\n    datasets,\n  };\n  const stacked = !(pivotConfig.x || []).includes('measures');\n  const options = {\n    ...commonOptions,\n    scales: {\n      x: { ...commonOptions.scales.x, stacked },\n      y: { ...commonOptions.scales.y, stacked },\n    },\n  };\n  return <Bar type=\"bar\" data={data} options={options} />;\n};\n\nconst AreaChartRenderer = ({ resultSet }) => {\n  const datasets = useDeepCompareMemo(\n    () =>\n      resultSet.series().map((s, index) => ({\n        label: s.title,\n        data: s.series.map((r) => r.value),\n        pointRadius: 1,\n        pointHoverRadius: 1,\n        backgroundColor: PALE_COLORS_SERIES[index],\n        borderWidth: 0,\n        fill: true,\n        tension: 0,\n      })),\n    [resultSet]\n  );\n  const data = {\n    labels: resultSet.categories().map((c) => c.x),\n    datasets,\n  };\n  const options = {\n    ...commonOptions,\n    scales: {\n      ...commonOptions.scales,\n      y: {\n        stacked: true,\n      },\n    },\n  };\n  return <Line type=\"area\" data={data} options={options} />;\n};\n\nconst formatTableData = (columns, data) => {\n  function flatten(columns = []) {\n    return columns.reduce((memo, column) => {\n      if (column.children) {\n        return [...memo, ...flatten(column.children)];\n      }\n\n      return [...memo, column];\n    }, []);\n  }\n\n  const typeByIndex = flatten(columns).reduce((memo, column) => {\n    return { ...memo, [column.dataIndex]: column };\n  }, {});\n\n  function formatValue(value, { type, format } = {}) {\n    if (value == undefined) {\n      return value;\n    }\n\n    if (type === 'boolean') {\n      return Boolean(value).toString();\n    }\n\n    if (type === 'number' && format === 'percent') {\n      return [parseFloat(value).toFixed(2), '%'].join('');\n    }\n\n    return value.toString();\n  }\n\n  function format(row) {\n    return Object.fromEntries(\n      Object.entries(row).map(([dataIndex, value]) => {\n        return [dataIndex, formatValue(value, typeByIndex[dataIndex])];\n      })\n    );\n  }\n\n  return data.map(format);\n};\n\nconst TableRenderer = ({ resultSet, pivotConfig }) => {\n  const [tableColumns, dataSource] = useDeepCompareMemo(() => {\n    const columns = resultSet.tableColumns(pivotConfig);\n    return [\n      columns,\n      formatTableData(columns, resultSet.tablePivot(pivotConfig)),\n    ];\n  }, [resultSet, pivotConfig]);\n  return (\n    <Table pagination={false} columns={tableColumns} dataSource={dataSource} />\n  );\n};\n"}function R(){return y}var w=["import React from 'react';","import * as d3 from 'd3';","import { Row, Col, Statistic, Table } from 'antd';","import { useDeepCompareMemo } from 'use-deep-compare';"];function A(e){return"line"===e?'return <D3Chart type="line" {...props} />;\n':"bar"===e?'return <D3Chart type="bar" {...props} />;\n':"area"===e?'return <D3Chart type="area" {...props} />;\n':"pie"===e?'return <D3Chart type="pie" {...props} />;\n':"number"===e?'return (\n  <Row\n    type="flex"\n    justify="center"\n    align="middle"\n    style={{\n      height: \'100%\',\n    }}\n  >\n    <Col>\n      {resultSet.seriesNames().map((s) => (\n        <Statistic value={resultSet.totalRow()[s.key]} />\n      ))}\n    </Col>\n  </Row>\n);\n':"height"===e?"":"table"===e?"return <TableRenderer resultSet={resultSet} pivotConfig={pivotConfig} />;\n":void 0}function F(){return"const COLORS_SERIES = [\n  '#7A77FF',\n  '#141446',\n  '#FF6492',\n  '#727290',\n  '#43436B',\n  '#BEF3BE',\n  '#68B68C',\n  '#FFE7AA',\n  '#B2A58D',\n  '#64C8E0',\n];\nconst CHART_HEIGHT = 300;\n\nconst drawPieChart = (node, resultSet, options) => {\n  const data = resultSet.series()[0].series.map((s) => s.value);\n  const data_ready = d3.pie()(data);\n  d3.select(node).html(''); // The radius of the pieplot is half the width or half the height (smallest one).\n\n  const radius = CHART_HEIGHT / 2 - 40; // Seprate container to center align pie chart\n\n  const svg = d3\n    .select(node)\n    .append('svg')\n    .attr('width', node.clientWidth)\n    .attr('height', CHART_HEIGHT)\n    .append('g')\n    .attr(\n      'transform',\n      'translate(' + node.clientWidth / 2 + ',' + CHART_HEIGHT / 2 + ')'\n    );\n  svg\n    .selectAll('pieArcs')\n    .data(data_ready)\n    .enter()\n    .append('path')\n    .attr('d', d3.arc().innerRadius(0).outerRadius(radius))\n    .attr('fill', (d) => COLORS_SERIES[d.index]);\n  const size = 12;\n  const labels = resultSet.series()[0].series.map((s) => s.x);\n  svg\n    .selectAll('myrect')\n    .data(labels)\n    .enter()\n    .append('rect')\n    .attr('x', 150)\n    .attr('y', function (d, i) {\n      return -50 + i * (size + 5);\n    })\n    .attr('width', size)\n    .attr('height', size)\n    .style('fill', (d, i) => COLORS_SERIES[i]);\n  svg\n    .selectAll('mylabels')\n    .data(labels)\n    .enter()\n    .append('text')\n    .attr('x', 150 + size * 1.2)\n    .attr('y', function (d, i) {\n      return -50 + i * (size + 5) + size / 2;\n    })\n    .text(function (d) {\n      return d;\n    })\n    .attr('text-anchor', 'left')\n    .attr('font-size', '12px')\n    .style('alignment-baseline', 'middle');\n};\n\nconst drawChart = (node, resultSet, chartType, options = {}) => {\n  if (chartType === 'pie') {\n    return drawPieChart(node, resultSet, options);\n  }\n\n  const margin = {\n      top: 10,\n      right: 30,\n      bottom: 30,\n      left: 60,\n    },\n    width = node.clientWidth - margin.left - margin.right,\n    height = CHART_HEIGHT - margin.top - margin.bottom;\n  d3.select(node).html('');\n  const svg = d3\n    .select(node)\n    .append('svg')\n    .attr('width', width + margin.left + margin.right)\n    .attr('height', height + margin.top + margin.bottom)\n    .append('g')\n    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n  const keys = resultSet.seriesNames(options.pivotConfig).map((s) => s.key);\n  let data, maxData;\n\n  if (chartType === 'line') {\n    data = resultSet.series(options.pivotConfig).map((series) => ({\n      key: series.key,\n      values: series.series,\n    }));\n    maxData = d3.max(data.map((s) => d3.max(s.values, (i) => i.value)));\n  } else {\n    data = d3.stack().keys(keys)(resultSet.chartPivot(options.pivotConfig));\n    maxData = d3.max(data.map((s) => d3.max(s, (i) => i[1])));\n  }\n\n  const color = d3.scaleOrdinal().domain(keys).range(COLORS_SERIES);\n  let x;\n\n  if (chartType === 'bar') {\n    x = d3\n      .scaleBand()\n      .range([0, width])\n      .domain(resultSet.chartPivot(options.pivotConfig).map((c) => c.x))\n      .padding(0.3);\n  } else {\n    x = d3\n      .scaleTime()\n      .domain(\n        d3.extent(resultSet.chartPivot(options.pivotConfig), (c) =>\n          d3.isoParse(c.x)\n        )\n      )\n      .nice()\n      .range([0, width]);\n  }\n\n  svg\n    .append('g')\n    .attr('transform', 'translate(0,' + height + ')')\n    .call(d3.axisBottom(x));\n  const y = d3.scaleLinear().domain([0, maxData]).range([height, 0]);\n  svg.append('g').call(d3.axisLeft(y));\n\n  if (chartType === 'line') {\n    svg\n      .selectAll('.line')\n      .data(data)\n      .enter()\n      .append('path')\n      .attr('fill', 'none')\n      .attr('stroke', (d) => color(d.key))\n      .attr('stroke-width', 1.5)\n      .attr('d', (d) => {\n        return d3\n          .line()\n          .x((d) => x(d3.isoParse(d.x)))\n          .y((d) => y(+d.value))(d.values);\n      });\n  } else if (chartType === 'area') {\n    svg\n      .selectAll('mylayers')\n      .data(data)\n      .enter()\n      .append('path')\n      .style('fill', (d) => color(d.key))\n      .attr(\n        'd',\n        d3\n          .area()\n          .x((d) => x(d3.isoParse(d.data.x)))\n          .y0((d) => y(d[0]))\n          .y1((d) => y(d[1]))\n      );\n  } else {\n    svg\n      .append('g')\n      .selectAll('g') // Enter in the stack data = loop key per key = group per group\n      .data(data)\n      .enter()\n      .append('g')\n      .attr('fill', (d) => color(d.key))\n      .selectAll('rect') // enter a second time = loop subgroup per subgroup to add all rectangles\n      .data((d) => d)\n      .enter()\n      .append('rect')\n      .attr('x', (d) => x(d.data.x))\n      .attr('y', (d) => y(d[1]))\n      .attr('height', (d) => y(d[0]) - y(d[1]))\n      .attr('width', x.bandwidth());\n  }\n};\n\nconst D3Chart = ({ resultSet, type, ...props }) => (\n  <div ref={(el) => el && drawChart(el, resultSet, type, props)} />\n);\n\nconst formatTableData = (columns, data) => {\n  function flatten(columns = []) {\n    return columns.reduce((memo, column) => {\n      if (column.children) {\n        return [...memo, ...flatten(column.children)];\n      }\n\n      return [...memo, column];\n    }, []);\n  }\n\n  const typeByIndex = flatten(columns).reduce((memo, column) => {\n    return { ...memo, [column.dataIndex]: column };\n  }, {});\n\n  function formatValue(value, { type, format } = {}) {\n    if (value == undefined) {\n      return value;\n    }\n\n    if (type === 'boolean') {\n      return Boolean(value).toString();\n    }\n\n    if (type === 'number' && format === 'percent') {\n      return [parseFloat(value).toFixed(2), '%'].join('');\n    }\n\n    return value.toString();\n  }\n\n  function format(row) {\n    return Object.fromEntries(\n      Object.entries(row).map(([dataIndex, value]) => {\n        return [dataIndex, formatValue(value, typeByIndex[dataIndex])];\n      })\n    );\n  }\n\n  return data.map(format);\n};\n\nconst TableRenderer = ({ resultSet, pivotConfig }) => {\n  const [tableColumns, dataSource] = useDeepCompareMemo(() => {\n    const columns = resultSet.tableColumns(pivotConfig);\n    return [\n      columns,\n      formatTableData(columns, resultSet.tablePivot(pivotConfig)),\n    ];\n  }, [resultSet, pivotConfig]);\n  return (\n    <Table pagination={false} columns={tableColumns} dataSource={dataSource} />\n  );\n};\n"}function I(){return w}var T={bizchartsCharts:r,rechartsCharts:a,chartjsCharts:o,d3Charts:i},E=["react-dom","@cubejs-client/core","@cubejs-client/react","antd"];var P=t(60),B=t(7),D=function(e){var n=e.queryId,t=e.renderFunction,r=e.query,a=e.pivotConfig,o=e.refetchCounter,i=(0,(window.parent.window.__cubejsPlayground||{}).forQuery)(n),u=i.onQueryStart,c=i.onQueryLoad,l=i.onQueryProgress,d=Object(m.b)(r),f=d.isLoading,b=d.error,h=d.resultSet,v=d.progress,j=d.refetch;return Object(P.a)((function(){f&&Object(p.b)(r)&&"function"===typeof u&&u(n)}),[f,r]),Object(s.useEffect)((function(){o>0&&j()}),[o]),Object(s.useEffect)((function(){f||"function"!==typeof c||c({resultSet:h,error:b}),"function"===typeof l&&l(v)}),[b,f,h,v]),!h||b?null:t({resultSet:h,pivotConfig:a})},L=function(e){var n=e.queryId,t=e.renderFunction,r=e.query,a=e.pivotConfig,o=void 0===a?null:a,i=e.refetchCounter;return Object(B.jsx)(D,{queryId:n,renderFunction:t,query:r,pivotConfig:o,refetchCounter:i})},_=t(33),V=t(29),N=t(53),z=t(958),H=t(962),M=t(963),G=t(959),K=function(e){var n=e.resultSet,t=e.children,r=e.ChartComponent;return Object(B.jsx)(N.l,{width:"100%",height:350,children:Object(B.jsxs)(r,{data:n.chartPivot(),children:[Object(B.jsx)(N.n,{dataKey:"x"}),Object(B.jsx)(N.o,{}),Object(B.jsx)(N.e,{}),t,Object(B.jsx)(N.g,{}),Object(B.jsx)(N.m,{})]})})},W=["#FF6492","#141446","#7A77FF"],q=function(e,n){var t=function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return n.reduce((function(n,t){return t.children?[].concat(Object(f.a)(n),Object(f.a)(e(t.children))):[].concat(Object(f.a)(n),[t])}),[])}(e).reduce((function(e,n){return Object(V.a)(Object(V.a)({},e),{},Object(_.a)({},n.dataIndex,n))}),{});function r(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=n.type,r=n.format;return void 0==e?e:"boolean"===t?Boolean(e).toString():"number"===t&&"percent"===r?[parseFloat(e).toFixed(2),"%"].join(""):e.toString()}return n.map((function(e){return Object.fromEntries(Object.entries(e).map((function(e){var n=Object(d.a)(e,2),a=n[0];return[a,r(n[1],t[a])]})))}))},Q=function(e){var n=e.resultSet,t=e.pivotConfig,r=Object(P.b)((function(){var e=n.tableColumns(t);return[e,q(e,n.tablePivot(t))]}),[n,t]),a=Object(d.a)(r,2),o=a[0],i=a[1];return Object(B.jsx)(z.a,{pagination:!1,columns:o,dataSource:i})},U={line:function(e){var n=e.resultSet;return Object(B.jsx)(K,{resultSet:n,ChartComponent:N.i,children:n.seriesNames().map((function(e,n){return Object(B.jsx)(N.h,{stackId:"a",dataKey:e.key,name:e.title,stroke:W[n]},e.key)}))})},bar:function(e){var n=e.resultSet;return Object(B.jsx)(K,{resultSet:n,ChartComponent:N.d,children:n.seriesNames().map((function(e,n){return Object(B.jsx)(N.c,{stackId:"a",dataKey:e.key,name:e.title,fill:W[n]},e.key)}))})},area:function(e){var n=e.resultSet;return Object(B.jsx)(K,{resultSet:n,ChartComponent:N.b,children:n.seriesNames().map((function(e,n){return Object(B.jsx)(N.a,{stackId:"a",dataKey:e.key,name:e.title,stroke:W[n],fill:W[n]},e.key)}))})},pie:function(e){var n=e.resultSet;return Object(B.jsx)(N.l,{width:"100%",height:350,children:Object(B.jsxs)(N.k,{children:[Object(B.jsx)(N.j,{isAnimationActive:!1,data:n.chartPivot(),nameKey:"x",dataKey:n.seriesNames()[0].key,fill:"#8884d8",children:n.chartPivot().map((function(e,n){return Object(B.jsx)(N.f,{fill:W[n%W.length]},n)}))}),Object(B.jsx)(N.g,{}),Object(B.jsx)(N.m,{})]})})},number:function(e){var n=e.resultSet;return Object(B.jsx)(H.a,{type:"flex",justify:"center",align:"middle",style:{height:"100%"},children:Object(B.jsx)(M.a,{children:n.seriesNames().map((function(e){return Object(B.jsx)(G.a,{value:n.totalRow()[e.key]})}))})})},table:function(e){var n=e.resultSet,t=e.pivotConfig;return Object(B.jsx)(Q,{resultSet:n,pivotConfig:t})}},J=t(562),X=t(46),Y=["resultSet","type"],Z=["#7A77FF","#141446","#FF6492","#727290","#43436B","#BEF3BE","#68B68C","#FFE7AA","#B2A58D","#64C8E0"],$=300,ee=function(e,n,t){var r=n.series()[0].series.map((function(e){return e.value})),a=X.i()(r);X.n(e).html("");var o=X.n(e).append("svg").attr("width",e.clientWidth).attr("height",$).append("g").attr("transform","translate("+e.clientWidth/2+",150)");o.selectAll("pieArcs").data(a).enter().append("path").attr("d",X.a().innerRadius(0).outerRadius(110)).attr("fill",(function(e){return Z[e.index]}));var i=12,s=n.series()[0].series.map((function(e){return e.x}));o.selectAll("myrect").data(s).enter().append("rect").attr("x",150).attr("y",(function(e,n){return 17*n-50})).attr("width",i).attr("height",i).style("fill",(function(e,n){return Z[n]})),o.selectAll("mylabels").data(s).enter().append("text").attr("x",164.4).attr("y",(function(e,n){return 17*n-50+6})).text((function(e){return e})).attr("text-anchor","left").attr("font-size","12px").style("alignment-baseline","middle")},ne=function(e){var n=e.resultSet,t=e.type,r=Object(J.a)(e,Y);return Object(B.jsx)("div",{ref:function(e){return e&&function(e,n,t){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};if("pie"===t)return ee(e,n);var a={top:10,right:30,bottom:30,left:60},o=e.clientWidth-a.left-a.right,i=$-a.top-a.bottom;X.n(e).html("");var s,u,c=X.n(e).append("svg").attr("width",o+a.left+a.right).attr("height",i+a.top+a.bottom).append("g").attr("transform","translate("+a.left+","+a.top+")"),l=n.seriesNames(r.pivotConfig).map((function(e){return e.key}));"line"===t?(s=n.series(r.pivotConfig).map((function(e){return{key:e.key,values:e.series}})),u=X.h(s.map((function(e){return X.h(e.values,(function(e){return e.value}))})))):(s=X.o().keys(l)(n.chartPivot(r.pivotConfig)),u=X.h(s.map((function(e){return X.h(e,(function(e){return e[1]}))}))));var d,p=X.l().domain(l).range(Z);d="bar"===t?X.j().range([0,o]).domain(n.chartPivot(r.pivotConfig).map((function(e){return e.x}))).padding(.3):X.m().domain(X.e(n.chartPivot(r.pivotConfig),(function(e){return X.f(e.x)}))).nice().range([0,o]),c.append("g").attr("transform","translate(0,"+i+")").call(X.c(d));var m=X.k().domain([0,u]).range([i,0]);c.append("g").call(X.d(m)),"line"===t?c.selectAll(".line").data(s).enter().append("path").attr("fill","none").attr("stroke",(function(e){return p(e.key)})).attr("stroke-width",1.5).attr("d",(function(e){return X.g().x((function(e){return d(X.f(e.x))})).y((function(e){return m(+e.value)}))(e.values)})):"area"===t?c.selectAll("mylayers").data(s).enter().append("path").style("fill",(function(e){return p(e.key)})).attr("d",X.b().x((function(e){return d(X.f(e.data.x))})).y0((function(e){return m(e[0])})).y1((function(e){return m(e[1])}))):c.append("g").selectAll("g").data(s).enter().append("g").attr("fill",(function(e){return p(e.key)})).selectAll("rect").data((function(e){return e})).enter().append("rect").attr("x",(function(e){return d(e.data.x)})).attr("y",(function(e){return m(e[1])})).attr("height",(function(e){return m(e[0])-m(e[1])})).attr("width",d.bandwidth())}(e,n,t,r)}})},te=function(e,n){var t=function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return n.reduce((function(n,t){return t.children?[].concat(Object(f.a)(n),Object(f.a)(e(t.children))):[].concat(Object(f.a)(n),[t])}),[])}(e).reduce((function(e,n){return Object(V.a)(Object(V.a)({},e),{},Object(_.a)({},n.dataIndex,n))}),{});function r(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=n.type,r=n.format;return void 0==e?e:"boolean"===t?Boolean(e).toString():"number"===t&&"percent"===r?[parseFloat(e).toFixed(2),"%"].join(""):e.toString()}return n.map((function(e){return Object.fromEntries(Object.entries(e).map((function(e){var n=Object(d.a)(e,2),a=n[0];return[a,r(n[1],t[a])]})))}))},re=function(e){var n=e.resultSet,t=e.pivotConfig,r=Object(P.b)((function(){var e=n.tableColumns(t);return[e,te(e,n.tablePivot(t))]}),[n,t]),a=Object(d.a)(r,2),o=a[0],i=a[1];return Object(B.jsx)(z.a,{pagination:!1,columns:o,dataSource:i})},ae={line:function(e){return Object(B.jsx)(ne,Object(V.a)({type:"line"},e))},bar:function(e){return Object(B.jsx)(ne,Object(V.a)({type:"bar"},e))},area:function(e){return Object(B.jsx)(ne,Object(V.a)({type:"area"},e))},pie:function(e){return Object(B.jsx)(ne,Object(V.a)({type:"pie"},e))},number:function(e){var n=e.resultSet;return Object(B.jsx)(H.a,{type:"flex",justify:"center",align:"middle",style:{height:"100%"},children:Object(B.jsx)(M.a,{children:n.seriesNames().map((function(e){return Object(B.jsx)(G.a,{value:n.totalRow()[e.key]})}))})})},table:function(e){var n=e.resultSet,t=e.pivotConfig;return Object(B.jsx)(re,{resultSet:n,pivotConfig:t})}},oe=t(62),ie=function(e){return e.pivot().map((function(n){var t=n.xValues;return n.yValuesArray.map((function(n){var r=Object(d.a)(n,2),a=r[0],o=r[1];return{x:e.axisValuesString(t,", "),color:e.axisValuesString(a,", "),measure:o&&Number.parseFloat(o)}}))})).reduce((function(e,n){return e.concat(n)}),[])},se=function(e){var n=e.resultSet,t=Object(P.b)((function(){return ie(n)}),[n]);return Object(B.jsxs)(oe.Chart,{scale:{x:{tickCount:8}},autoFit:!0,height:400,data:t,forceFit:!0,children:[Object(B.jsx)(oe.Axis,{name:"x"}),Object(B.jsx)(oe.Axis,{name:"measure"}),Object(B.jsx)(oe.Tooltip,{crosshairs:{type:"y"}}),Object(B.jsx)(oe.Geom,{type:"line",position:"x*measure",size:2,color:"color"})]})},ue=function(e){var n=e.resultSet,t=e.pivotConfig,r=Object(P.b)((function(){return ie(n)}),[n.serialize()]),a=!(t.x||[]).includes("measures");return Object(B.jsxs)(oe.Chart,{scale:{x:{tickCount:8}},autoFit:!0,height:400,data:r,forceFit:!0,children:[Object(B.jsx)(oe.Axis,{name:"x"}),Object(B.jsx)(oe.Axis,{name:"measure"}),Object(B.jsx)(oe.Tooltip,{}),Object(B.jsx)(oe.Geom,{type:"interval",position:"x*measure",color:"color",adjust:a?"stack":"dodge"})]})},ce=function(e){var n=e.resultSet,t=Object(P.b)((function(){return ie(n)}),[n.serialize()]);return Object(B.jsxs)(oe.Chart,{scale:{x:{tickCount:8}},autoFit:!0,height:400,data:t,forceFit:!0,children:[Object(B.jsx)(oe.Axis,{name:"x"}),Object(B.jsx)(oe.Axis,{name:"measure"}),Object(B.jsx)(oe.Tooltip,{crosshairs:{type:"y"}}),Object(B.jsx)(oe.Geom,{type:"area",adjust:"stack",position:"x*measure",size:2,color:"color"})]})},le=function(e){var n=e.resultSet,t=Object(P.b)((function(){return[n.chartPivot(),n.series()]}),[n]),r=Object(d.a)(t,2),a=r[0],o=r[1];return Object(B.jsx)(oe.PieChart,{data:a,radius:.8,angleField:o[0].key,colorField:"x",label:{visible:!0,offset:20},legend:{position:"bottom"}})},de=function(e,n){var t=function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return n.reduce((function(n,t){return t.children?[].concat(Object(f.a)(n),Object(f.a)(e(t.children))):[].concat(Object(f.a)(n),[t])}),[])}(e).reduce((function(e,n){return Object(V.a)(Object(V.a)({},e),{},Object(_.a)({},n.dataIndex,n))}),{});function r(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=n.type,r=n.format;return void 0==e?e:"boolean"===t?Boolean(e).toString():"number"===t&&"percent"===r?[parseFloat(e).toFixed(2),"%"].join(""):e.toString()}return n.map((function(e){return Object.fromEntries(Object.entries(e).map((function(e){var n=Object(d.a)(e,2),a=n[0];return[a,r(n[1],t[a])]})))}))},pe=function(e){var n=e.resultSet,t=e.pivotConfig,r=Object(P.b)((function(){var e=n.tableColumns(t);return[e,de(e,n.tablePivot(t))]}),[n,t]),a=Object(d.a)(r,2),o=a[0],i=a[1];return Object(B.jsx)(z.a,{pagination:!1,columns:o,dataSource:i})},me={line:function(e){var n=e.resultSet;return Object(B.jsx)(se,{resultSet:n})},bar:function(e){var n=e.resultSet,t=e.pivotConfig;return Object(B.jsx)(ue,{resultSet:n,pivotConfig:t})},area:function(e){var n=e.resultSet;return Object(B.jsx)(ce,{resultSet:n})},pie:function(e){var n=e.resultSet;return Object(B.jsx)(le,{resultSet:n})},number:function(e){var n=e.resultSet;return Object(B.jsx)(H.a,{type:"flex",justify:"center",align:"middle",style:{height:"100%"},children:Object(B.jsx)(M.a,{children:n.seriesNames().map((function(e){return Object(B.jsx)(G.a,{value:n.totalRow()[e.key]})}))})})},table:function(e){var n=e.resultSet,t=e.pivotConfig;return Object(B.jsx)(pe,{resultSet:n,pivotConfig:t})}},fe=t(217),be=["#5b8ff9","#5ad8a6","#5e7092","#f6bd18","#6f5efa","#6ec8ec","#945fb9","#ff9845","#299796","#fe99c3"],he=["#d7e3fd","#daf5e9","#d6dbe4","#fdeecd","#dad8fe","#dbf1fa","#e4d7ed","#ffe5d2","#cce5e4","#ffe6f0"],ve={maintainAspectRatio:!1,interaction:{intersect:!1},plugins:{legend:{position:"bottom"}},scales:{x:{ticks:{autoSkip:!0,maxRotation:0,padding:12,minRotation:0}}}},je=function(e){var n=e.resultSet,t=Object(P.b)((function(){return n.series().map((function(e,n){return{label:e.title,data:e.series.map((function(e){return e.value})),borderColor:be[n],pointRadius:1,tension:.1,pointHoverRadius:1,borderWidth:2,tickWidth:1,fill:!1}}))}),[n]),r={labels:n.categories().map((function(e){return e.x})),datasets:t};return Object(B.jsx)(fe.b,{type:"line",data:r,options:ve})},ge=function(e){var n=e.resultSet,t=e.pivotConfig,r=Object(P.b)((function(){return n.series().map((function(e,n){return{label:e.title,data:e.series.map((function(e){return e.value})),backgroundColor:be[n],fill:!1}}))}),[n]),a={labels:n.categories().map((function(e){return e.x})),datasets:r},o=!(t.x||[]).includes("measures"),i=Object(V.a)(Object(V.a)({},ve),{},{scales:{x:Object(V.a)(Object(V.a)({},ve.scales.x),{},{stacked:o}),y:Object(V.a)(Object(V.a)({},ve.scales.y),{},{stacked:o})}});return Object(B.jsx)(fe.a,{type:"bar",data:a,options:i})},Ce=function(e){var n=e.resultSet,t=Object(P.b)((function(){return n.series().map((function(e,n){return{label:e.title,data:e.series.map((function(e){return e.value})),pointRadius:1,pointHoverRadius:1,backgroundColor:he[n],borderWidth:0,fill:!0,tension:0}}))}),[n]),r={labels:n.categories().map((function(e){return e.x})),datasets:t},a=Object(V.a)(Object(V.a)({},ve),{},{scales:Object(V.a)(Object(V.a)({},ve.scales),{},{y:{stacked:!0}})});return Object(B.jsx)(fe.b,{type:"area",data:r,options:a})},xe=function(e,n){var t=function e(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return n.reduce((function(n,t){return t.children?[].concat(Object(f.a)(n),Object(f.a)(e(t.children))):[].concat(Object(f.a)(n),[t])}),[])}(e).reduce((function(e,n){return Object(V.a)(Object(V.a)({},e),{},Object(_.a)({},n.dataIndex,n))}),{});function r(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=n.type,r=n.format;return void 0==e?e:"boolean"===t?Boolean(e).toString():"number"===t&&"percent"===r?[parseFloat(e).toFixed(2),"%"].join(""):e.toString()}return n.map((function(e){return Object.fromEntries(Object.entries(e).map((function(e){var n=Object(d.a)(e,2),a=n[0];return[a,r(n[1],t[a])]})))}))},Se=function(e){var n=e.resultSet,t=e.pivotConfig,r=Object(P.b)((function(){var e=n.tableColumns(t);return[e,xe(e,n.tablePivot(t))]}),[n,t]),a=Object(d.a)(r,2),o=a[0],i=a[1];return Object(B.jsx)(z.a,{pagination:!1,columns:o,dataSource:i})},ye={line:function(e){var n=e.resultSet;return Object(B.jsx)(je,{resultSet:n})},bar:function(e){var n=e.resultSet,t=e.pivotConfig;return Object(B.jsx)(ge,{resultSet:n,pivotConfig:t})},area:function(e){var n=e.resultSet;return Object(B.jsx)(Ce,{resultSet:n})},pie:function(e){var n=e.resultSet,t={labels:n.categories().map((function(e){return e.x})),datasets:n.series().map((function(e){return{label:e.title,data:e.series.map((function(e){return e.value})),backgroundColor:be,hoverBackgroundColor:be}}))};return Object(B.jsx)(fe.c,{type:"pie",data:t,options:ve})},number:function(e){var n=e.resultSet;return Object(B.jsx)(H.a,{type:"flex",justify:"center",align:"middle",style:{height:"100%"},children:Object(B.jsx)(M.a,{children:n.seriesNames().map((function(e){return Object(B.jsx)(G.a,{value:n.totalRow()[e.key]})}))})})},table:function(e){var n=e.resultSet,t=e.pivotConfig;return Object(B.jsx)(Se,{resultSet:n,pivotConfig:t})}};window.__cubejsPlayground={getCodesandboxFiles:function(e,n){var t=n.query,r=n.pivotConfig,a=n.chartType,o=n.cubejsToken,i=n.apiUrl,s=T["".concat(e,"Charts")],u=s.getCommon,c=s.getImports,l=s.getChartComponent;return{"index.js":"import ReactDOM from 'react-dom';\nimport cubejs from '@cubejs-client/core';\nimport { QueryRenderer } from '@cubejs-client/react';\nimport { Spin } from 'antd';\nimport 'antd/dist/antd.css';\n".concat(c().join("\n"),"\n\n").concat(u(),"\n\nconst cubejsApi = cubejs(\n  '").concat(o,"',\n  { apiUrl: '").concat(i,"' }\n);\n\nconst renderChart = ({ resultSet, error, pivotConfig }) => {\n  if (error) {\n    return <div>{error.toString()}</div>;\n  }\n\n  if (!resultSet) {\n    return <Spin />;\n  }\n\n  ").concat(l(a),"\n};\n\nconst ChartRenderer = () => {\n  return (\n    <QueryRenderer\n      query={").concat(t,"}\n      cubejsApi={cubejsApi}\n      resetResultSetOnChange={false}\n      render={(props) => renderChart({\n        ...props,\n        chartType: '").concat(a,"',\n        pivotConfig: ").concat(r,"\n      })}\n    />\n  );\n};\n\nconst rootElement = document.getElementById('root');\nReactDOM.render(<ChartRenderer />, rootElement);\n      ")}},getDependencies:function(e){if(!e)throw new Error("`chartingLibrary` param is undefined");var n=T["".concat(e,"Charts")].getImports;return[].concat(E,Object(f.a)(n().map((function(e){var n=e.match(/['"]([^'"]+)['"]/);return Object(d.a)(n,2)[1]}))))}};var Oe={recharts:U,d3:ae,bizcharts:me,chartjs:ye},ke=function(){var e,n=window.location.hash.replace(/#\\/,"").split("="),t=Object(d.a)(n,2),r=(t[0],t[1]),a=Object(s.useState)(null),o=Object(d.a)(a,2),i=o[0],u=o[1],c=Object(s.useState)(null),l=Object(d.a)(c,2),f=l[0],b=l[1],h=Object(s.useState)(null),v=Object(d.a)(h,2),j=v[0],g=v[1],C=Object(s.useState)(null),x=Object(d.a)(C,2),S=x[0],y=x[1],O=Object(s.useState)(0),k=Object(d.a)(O,2),R=k[0],w=k[1],A=Object(s.useState)(0),F=Object(d.a)(A,2),I=F[0],T=F[1],E=Object(s.useMemo)((function(){var e=window.parent.window.__cubejsPlayground||{};return Object(p.a)(e.token,{apiUrl:e.apiUrl})}),[R]);return Object(s.useEffect)((function(){var e=(window.parent.window.__cubejsPlayground||{}).forQuery;"function"===typeof e&&e(r).onChartRendererReady()}),[]),Object(s.useLayoutEffect)((function(){window.addEventListener("__cubejsPlaygroundEvent",(function(e){var n=e.detail,t=n.query,r=n.chartingLibrary,a=n.chartType,o=n.pivotConfig,i=n.eventType;"chart"===i?(t&&u(t),o&&b(o),r&&g(r),a&&("bizcharts"===r?(y(null),setTimeout((function(){return y(a)}),0)):y(a))):"credentials"===i?w((function(e){return e+1})):"refetch"===i&&T((function(e){return e+1}))}))}),[]),Object(B.jsx)(m.a,{cubejsApi:E,children:Object(B.jsx)("div",{className:"App",children:(null===(e=Oe[j])||void 0===e?void 0:e[S])?Object(B.jsx)(L,{queryId:r,renderFunction:Oe[j][S],query:i,pivotConfig:f,refetchCounter:I}):null})})},Re=function(e){e&&e instanceof Function&&t.e(3).then(t.bind(null,965)).then((function(n){var t=n.getCLS,r=n.getFID,a=n.getFCP,o=n.getLCP,i=n.getTTFB;t(e),r(e),a(e),o(e),i(e)}))};l.a.render(Object(B.jsx)(u.a.StrictMode,{children:Object(B.jsx)(ke,{})}),document.getElementById("root")),Re()}},[[951,1,2]]]);