text: (this["webpackJsonpreact-charts"]=this["webpackJsonpreact-charts"]||[]).push([[0],{572:function(t,e,n){},574:function(t,e,n){},846:function(t,e,n){"use strict";n.r(e);var r={};n.r(r),n.d(r,"getChartComponent",(function(){return f})),n.d(r,"getCommon",(function(){return b})),n.d(r,"getImports",(function(){return g}));var a={};n.r(a),n.d(a,"getChartComponent",(function(){return j})),n.d(a,"getCommon",(function(){return C})),n.d(a,"getImports",(function(){return y}));var s={};n.r(s),n.d(s,"getChartComponent",(function(){return S})),n.d(s,"getCommon",(function(){return O})),n.d(s,"getImports",(function(){return k}));var i={};n.r(i),n.d(i,"getChartComponent",(function(){return R})),n.d(i,"getCommon",(function(){return F})),n.d(i,"getImports",(function(){return w}));var o=n(9),c=n(0),l=n.n(c),u=n(20),d=n.n(u),p=(n(572),n(63)),m=(n(573),n(574),n(445)),h=["import React from 'react';","import { Chart, Axis, Tooltip, Geom, Coord, Legend } from 'bizcharts';","import { Row, Col, Statistic, Table } from 'antd';"];function f(t){return"line"===t?'return (\n  <Chart\n    scale={{\n      x: {\n        tickCount: 8,\n      },\n    }}\n    height={400}\n    data={stackedChartData(resultSet)}\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':"x"===t||"tickCount"===t||"type"===t?"":"bar"===t?'return (\n  <Chart\n    scale={{\n      x: {\n        tickCount: 8,\n      },\n    }}\n    height={400}\n    data={stackedChartData(resultSet)}\n    forceFit\n  >\n    <Axis name="x" />\n    <Axis name="measure" />\n    <Tooltip />\n    <Geom type="interval" position="x*measure" color="color" />\n  </Chart>\n);\n':"x"===t||"tickCount"===t?"":"area"===t?'return (\n  <Chart\n    scale={{\n      x: {\n        tickCount: 8,\n      },\n    }}\n    height={400}\n    data={stackedChartData(resultSet)}\n    forceFit\n  >\n    <Axis name="x" />\n    <Axis name="measure" />\n    <Tooltip\n      crosshairs={{\n        type: \'y\',\n      }}\n    />\n    <Geom type="area" position="x*measure" size={2} color="color" />\n  </Chart>\n);\n':"x"===t||"tickCount"===t||"type"===t?"":"pie"===t?'return (\n  <Chart height={400} data={resultSet.chartPivot()} forceFit>\n    <Coord type="theta" radius={0.75} />\n    {resultSet.seriesNames().map((s) => (\n      <Axis name={s.key} />\n    ))}\n    <Legend position="right" />\n    <Tooltip />\n    {resultSet.seriesNames().map((s) => (\n      <Geom type="interval" position={s.key} color="category" />\n    ))}\n  </Chart>\n);\n':"height"===t?"":void 0}function b(){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"}function g(){return h}var x=["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';"];function j(t){return"line"===t?'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"===t?'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"===t?'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"===t?'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':"height"===t?"":void 0}function C(){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"}function y(){return x}var v=["import React from 'react';","import { Line, Bar, Pie } from 'react-chartjs-2';","import { Row, Col, Statistic, Table } from 'antd';"];function S(t){return"line"===t?"const data = {\n  labels: resultSet.categories().map((c) => c.category),\n  datasets: resultSet.series().map((s, index) => ({\n    label: s.title,\n    data: s.series.map((r) => r.value),\n    borderColor: COLORS_SERIES[index],\n    fill: false,\n  })),\n};\nconst options = { ...commonOptions };\nreturn <Line data={data} options={options} />;\n":"labels"===t||"datasets"===t||"label"===t||"data"===t||"borderColor"===t||"fill"===t?"":"bar"===t?"const data = {\n  labels: resultSet.categories().map((c) => c.category),\n  datasets: 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};\nconst options = {\n  ...commonOptions,\n  scales: {\n    xAxes: [\n      {\n        stacked: true,\n      },\n    ],\n  },\n};\nreturn <Bar data={data} options={options} />;\n":"labels"===t||"datasets"===t||"label"===t||"data"===t||"backgroundColor"===t||"fill"===t||"scales"===t||"xAxes"===t||"stacked"===t?"":"area"===t?"const data = {\n  labels: resultSet.categories().map((c) => c.category),\n  datasets: resultSet.series().map((s, index) => ({\n    label: s.title,\n    data: s.series.map((r) => r.value),\n    backgroundColor: COLORS_SERIES[index],\n  })),\n};\nconst options = {\n  ...commonOptions,\n  scales: {\n    yAxes: [\n      {\n        stacked: true,\n      },\n    ],\n  },\n};\nreturn <Line data={data} options={options} />;\n":"labels"===t||"datasets"===t||"label"===t||"data"===t||"backgroundColor"===t||"scales"===t||"yAxes"===t||"stacked"===t?"":"pie"===t?"const data = {\n  labels: resultSet.categories().map((c) => c.category),\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};\nconst options = { ...commonOptions };\nreturn <Pie data={data} options={options} />;\n":"labels"===t||"datasets"===t||"label"===t||"data"===t||"backgroundColor"===t||"hoverBackgroundColor"===t||"height"===t?"":void 0}function O(){return"const COLORS_SERIES = ['#FF6492', '#141446', '#7A77FF'];\nconst commonOptions = {\n  maintainAspectRatio: false,\n};\n"}function k(){return v}var A=["import React from 'react';","import * as d3 from 'd3';","import { Row, Col, Statistic, Table } from 'antd';"];function R(t){return"line"===t?'return <D3Chart type="line" {...props} />;\n':"bar"===t?'return <D3Chart type="bar" {...props} />;\n':"area"===t?'return <D3Chart type="area" {...props} />;\n':"pie"===t?'return <D3Chart type="pie" {...props} />;\n':"height"===t?"":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"}function w(){return A}var E={bizchartsCharts:r,rechartsCharts:a,chartjsCharts:s,d3Charts:i},T=["react-dom","@cubejs-client/core","@cubejs-client/react","antd"];function P(t,e){var n=e.query,r=e.pivotConfig,a=e.chartType,s=e.cubejsToken,i=e.apiUrl,o=E["".concat(t,"Charts")],c=o.getCommon,l=o.getImports,u=o.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(l().join("\n"),"\n\n").concat(c(),"\n\nconst cubejsApi = cubejs(\n  '").concat(s,"',\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(u(a),"\n};\n\nconst ChartRenderer = () => {\n  return (\n    <QueryRenderer\n      query={").concat(n,"}\n      cubejsApi={cubejsApi}\n      resetResultSetOnChange={false}\n      render={(props) => renderChart({\n        ...props,\n        pivotConfig: ").concat(r,"\n      })}\n    />\n  );\n};\n\nconst rootElement = document.getElementById('root');\nReactDOM.render(<ChartRenderer />, rootElement);\n      ")}}function L(t){var e=E["".concat(t,"Charts")].getImports;return[].concat(T,Object(m.a)(e().map((function(t){var e=t.match(/['"]([^'"]+)['"]/);return Object(p.a)(e,2)[1]}))))}var I=n(93),B=n.n(I),N=n(279),_=n(411),D=window.parent.window.__cubejsPlayground||{},V=B()(D.token||"secret",{apiUrl:D.apiUrl||"http://localhost:4000/cubejs-api/v1"}),z=function(t){var e=t.renderFunction,n=t.query,r=t.pivotConfig,a=Object(N.b)(n),s=a.error,i=a.resultSet;return s?Object(o.jsx)("div",{children:s.toString()}):i?e({resultSet:i,pivotConfig:r}):Object(o.jsx)(_.a,{})},G=function(t){var e=t.renderFunction,n=t.query,r=t.pivotConfig,a=void 0===r?null:r;return Object(o.jsx)(N.a,{cubejsApi:V,children:Object(o.jsx)(z,{renderFunction:e,query:n,pivotConfig:a})})},H=n(74),K=n(448),q=n(38),W=n(855),U=n(856),M=n(853),J=n(852),Q=["#7A77FF","#141446","#FF6492","#727290","#43436B","#BEF3BE","#68B68C","#FFE7AA","#B2A58D","#64C8E0"],X=300,Y=function(t,e,n){var r=e.series()[0].series.map((function(t){return t.value})),a=q.i()(r);q.n(t).html("");var s=q.n(t).append("svg").attr("width",t.clientWidth).attr("height",X).append("g").attr("transform","translate("+t.clientWidth/2+",150)");s.selectAll("pieArcs").data(a).enter().append("path").attr("d",q.a().innerRadius(0).outerRadius(110)).attr("fill",(function(t){return Q[t.index]}));var i=12,o=e.series()[0].series.map((function(t){return t.x}));s.selectAll("myrect").data(o).enter().append("rect").attr("x",150).attr("y",(function(t,e){return 17*e-50})).attr("width",i).attr("height",i).style("fill",(function(t,e){return Q[e]})),s.selectAll("mylabels").data(o).enter().append("text").attr("x",164.4).attr("y",(function(t,e){return 17*e-50+6})).text((function(t){return t})).attr("text-anchor","left").attr("font-size","12px").style("alignment-baseline","middle")},Z=function(t){var e=t.resultSet,n=t.type,r=Object(K.a)(t,["resultSet","type"]);return Object(o.jsx)("div",{ref:function(t){return t&&function(t,e,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};if("pie"===n)return Y(t,e);var a={top:10,right:30,bottom:30,left:60},s=t.clientWidth-a.left-a.right,i=X-a.top-a.bottom;q.n(t).html("");var o,c,l=q.n(t).append("svg").attr("width",s+a.left+a.right).attr("height",i+a.top+a.bottom).append("g").attr("transform","translate("+a.left+","+a.top+")"),u=e.seriesNames(r.pivotConfig).map((function(t){return t.key}));"line"===n?(o=e.series(r.pivotConfig).map((function(t){return{key:t.key,values:t.series}})),c=q.h(o.map((function(t){return q.h(t.values,(function(t){return t.value}))})))):(o=q.o().keys(u)(e.chartPivot(r.pivotConfig)),c=q.h(o.map((function(t){return q.h(t,(function(t){return t[1]}))}))));var d,p=q.l().domain(u).range(Q);d="bar"===n?q.j().range([0,s]).domain(e.chartPivot(r.pivotConfig).map((function(t){return t.x}))).padding(.3):q.m().domain(q.e(e.chartPivot(r.pivotConfig),(function(t){return q.f(t.x)}))).nice().range([0,s]),l.append("g").attr("transform","translate(0,"+i+")").call(q.c(d));var m=q.k().domain([0,c]).range([i,0]);l.append("g").call(q.d(m)),"line"===n?l.selectAll(".line").data(o).enter().append("path").attr("fill","none").attr("stroke",(function(t){return p(t.key)})).attr("stroke-width",1.5).attr("d",(function(t){return q.g().x((function(t){return d(q.f(t.x))})).y((function(t){return m(+t.value)}))(t.values)})):"area"===n?l.selectAll("mylayers").data(o).enter().append("path").style("fill",(function(t){return p(t.key)})).attr("d",q.b().x((function(t){return d(q.f(t.data.x))})).y0((function(t){return m(t[0])})).y1((function(t){return m(t[1])}))):l.append("g").selectAll("g").data(o).enter().append("g").attr("fill",(function(t){return p(t.key)})).selectAll("rect").data((function(t){return t})).enter().append("rect").attr("x",(function(t){return d(t.data.x)})).attr("y",(function(t){return m(t[1])})).attr("height",(function(t){return m(t[0])-m(t[1])})).attr("width",d.bandwidth())}(t,e,n,r)}})},$={line:function(t){return Object(o.jsx)(Z,Object(H.a)({type:"line"},t))},bar:function(t){return Object(o.jsx)(Z,Object(H.a)({type:"bar"},t))},area:function(t){return Object(o.jsx)(Z,Object(H.a)({type:"area"},t))},pie:function(t){return Object(o.jsx)(Z,Object(H.a)({type:"pie"},t))},number:function(t){var e=t.resultSet;return Object(o.jsx)(W.a,{type:"flex",justify:"center",align:"middle",style:{height:"100%"},children:Object(o.jsx)(U.a,{children:e.seriesNames().map((function(t){return Object(o.jsx)(M.a,{value:e.totalRow()[t.key]})}))})})},table:function(t){var e=t.resultSet,n=t.pivotConfig;return Object(o.jsx)(J.a,{pagination:!1,columns:e.tableColumns(n),dataSource:e.tablePivot(n)})}},tt=n(50),et=function(t){var e=t.resultSet,n=t.children,r=t.ChartComponent;return Object(o.jsx)(tt.l,{width:"100%",height:350,children:Object(o.jsxs)(r,{data:e.chartPivot(),children:[Object(o.jsx)(tt.n,{dataKey:"x"}),Object(o.jsx)(tt.o,{}),Object(o.jsx)(tt.e,{}),n,Object(o.jsx)(tt.g,{}),Object(o.jsx)(tt.m,{})]})})},nt=["#FF6492","#141446","#7A77FF"],rt={line:function(t){var e=t.resultSet;return Object(o.jsx)(et,{resultSet:e,ChartComponent:tt.i,children:e.seriesNames().map((function(t,e){return Object(o.jsx)(tt.h,{stackId:"a",dataKey:t.key,name:t.title,stroke:nt[e]},t.key)}))})},bar:function(t){var e=t.resultSet;return Object(o.jsx)(et,{resultSet:e,ChartComponent:tt.d,children:e.seriesNames().map((function(t,e){return Object(o.jsx)(tt.c,{stackId:"a",dataKey:t.key,name:t.title,fill:nt[e]},t.key)}))})},area:function(t){var e=t.resultSet;return Object(o.jsx)(et,{resultSet:e,ChartComponent:tt.b,children:e.seriesNames().map((function(t,e){return Object(o.jsx)(tt.a,{stackId:"a",dataKey:t.key,name:t.title,stroke:nt[e],fill:nt[e]},t.key)}))})},pie:function(t){var e=t.resultSet;return Object(o.jsx)(tt.l,{width:"100%",height:350,children:Object(o.jsxs)(tt.k,{children:[Object(o.jsx)(tt.j,{isAnimationActive:!1,data:e.chartPivot(),nameKey:"x",dataKey:e.seriesNames()[0].key,fill:"#8884d8",children:e.chartPivot().map((function(t,e){return Object(o.jsx)(tt.f,{fill:nt[e%nt.length]},e)}))}),Object(o.jsx)(tt.g,{}),Object(o.jsx)(tt.m,{})]})})},number:function(t){var e=t.resultSet;return Object(o.jsx)(W.a,{type:"flex",justify:"center",align:"middle",style:{height:"100%"},children:Object(o.jsx)(U.a,{children:e.seriesNames().map((function(t){return Object(o.jsx)(M.a,{value:e.totalRow()[t.key]})}))})})},table:function(t){var e=t.resultSet,n=t.pivotConfig;return Object(o.jsx)(J.a,{pagination:!1,columns:e.tableColumns(n),dataSource:e.tablePivot(n)})}},at=n(42),st=function(t){return t.pivot().map((function(e){var n=e.xValues;return e.yValuesArray.map((function(e){var r=Object(p.a)(e,2),a=r[0],s=r[1];return{x:t.axisValuesString(n,", "),color:t.axisValuesString(a,", "),measure:s&&Number.parseFloat(s)}}))})).reduce((function(t,e){return t.concat(e)}),[])},it={line:function(t){var e=t.resultSet;return Object(o.jsxs)(at.Chart,{scale:{x:{tickCount:8}},height:400,data:st(e),forceFit:!0,children:[Object(o.jsx)(at.Axis,{name:"x"}),Object(o.jsx)(at.Axis,{name:"measure"}),Object(o.jsx)(at.Tooltip,{crosshairs:{type:"y"}}),Object(o.jsx)(at.Geom,{type:"line",position:"x*measure",size:2,color:"color"})]})},bar:function(t){var e=t.resultSet;return Object(o.jsxs)(at.Chart,{scale:{x:{tickCount:8}},height:400,data:st(e),forceFit:!0,children:[Object(o.jsx)(at.Axis,{name:"x"}),Object(o.jsx)(at.Axis,{name:"measure"}),Object(o.jsx)(at.Tooltip,{}),Object(o.jsx)(at.Geom,{type:"interval",position:"x*measure",color:"color"})]})},area:function(t){var e=t.resultSet;return Object(o.jsxs)(at.Chart,{scale:{x:{tickCount:8}},height:400,data:st(e),forceFit:!0,children:[Object(o.jsx)(at.Axis,{name:"x"}),Object(o.jsx)(at.Axis,{name:"measure"}),Object(o.jsx)(at.Tooltip,{crosshairs:{type:"y"}}),Object(o.jsx)(at.Geom,{type:"area",position:"x*measure",size:2,color:"color"})]})},pie:function(t){var e=t.resultSet;return Object(o.jsxs)(at.Chart,{height:400,data:e.chartPivot(),forceFit:!0,children:[Object(o.jsx)(at.Coord,{type:"theta",radius:.75}),e.seriesNames().map((function(t){return Object(o.jsx)(at.Axis,{name:t.key})})),Object(o.jsx)(at.Legend,{position:"right"}),Object(o.jsx)(at.Tooltip,{}),e.seriesNames().map((function(t){return Object(o.jsx)(at.Geom,{type:"interval",position:t.key,color:"category"})}))]})},number:function(t){var e=t.resultSet;return Object(o.jsx)(W.a,{type:"flex",justify:"center",align:"middle",style:{height:"100%"},children:Object(o.jsx)(U.a,{children:e.seriesNames().map((function(t){return Object(o.jsx)(M.a,{value:e.totalRow()[t.key]})}))})})},table:function(t){var e=t.resultSet,n=t.pivotConfig;return Object(o.jsx)(J.a,{pagination:!1,columns:e.tableColumns(n),dataSource:e.tablePivot(n)})}},ot=n(168),ct=["#FF6492","#141446","#7A77FF"],lt={maintainAspectRatio:!1},ut={d3:$,recharts:rt,bizcharts:it,chartjs:{line:function(t){var e=t.resultSet,n={labels:e.categories().map((function(t){return t.category})),datasets:e.series().map((function(t,e){return{label:t.title,data:t.series.map((function(t){return t.value})),borderColor:ct[e],fill:!1}}))},r=Object(H.a)({},lt);return Object(o.jsx)(ot.Line,{data:n,options:r})},bar:function(t){var e=t.resultSet,n={labels:e.categories().map((function(t){return t.category})),datasets:e.series().map((function(t,e){return{label:t.title,data:t.series.map((function(t){return t.value})),backgroundColor:ct[e],fill:!1}}))},r=Object(H.a)(Object(H.a)({},lt),{},{scales:{xAxes:[{stacked:!0}]}});return Object(o.jsx)(ot.Bar,{data:n,options:r})},area:function(t){var e=t.resultSet,n={labels:e.categories().map((function(t){return t.category})),datasets:e.series().map((function(t,e){return{label:t.title,data:t.series.map((function(t){return t.value})),backgroundColor:ct[e]}}))},r=Object(H.a)(Object(H.a)({},lt),{},{scales:{yAxes:[{stacked:!0}]}});return Object(o.jsx)(ot.Line,{data:n,options:r})},pie:function(t){var e=t.resultSet,n={labels:e.categories().map((function(t){return t.category})),datasets:e.series().map((function(t){return{label:t.title,data:t.series.map((function(t){return t.value})),backgroundColor:ct,hoverBackgroundColor:ct}}))},r=Object(H.a)({},lt);return Object(o.jsx)(ot.Pie,{data:n,options:r})},number:function(t){var e=t.resultSet;return Object(o.jsx)(W.a,{type:"flex",justify:"center",align:"middle",style:{height:"100%"},children:Object(o.jsx)(U.a,{children:e.seriesNames().map((function(t){return Object(o.jsx)(M.a,{value:e.totalRow()[t.key]})}))})})},table:function(t){var e=t.resultSet,n=t.pivotConfig;return Object(o.jsx)(J.a,{pagination:!1,columns:e.tableColumns(n),dataSource:e.tablePivot(n)})}}},dt=function(){var t,e=Object(c.useState)(null),n=Object(p.a)(e,2),r=n[0],a=n[1],s=Object(c.useState)(null),i=Object(p.a)(s,2),l=i[0],u=i[1],d=Object(c.useState)(null),m=Object(p.a)(d,2),h=m[0],f=m[1],b=Object(c.useState)(null),g=Object(p.a)(b,2),x=g[0],j=g[1];return Object(c.useEffect)((function(){window.__cubejsPlayground={getCodesandboxFiles:P,getDependencies:L},window.dispatchEvent(new CustomEvent("cubejsChartReady")),window.addEventListener("cubejs",(function(t){var e=t.detail,n=e.query,r=e.chartingLibrary,s=e.chartType,i=e.pivotConfig;n&&a(n),i&&u(i),r&&f(r),s&&("bizcharts"===r?(j(null),setTimeout((function(){return j(s)}),0)):j(s))}))}),[]),Object(o.jsx)("div",{className:"App",children:(null===(t=ut[h])||void 0===t?void 0:t[x])?Object(o.jsx)(G,{renderFunction:ut[h][x],query:r,pivotConfig:l}):null})},pt=function(t){t&&t instanceof Function&&n.e(3).then(n.bind(null,858)).then((function(e){var n=e.getCLS,r=e.getFID,a=e.getFCP,s=e.getLCP,i=e.getTTFB;n(t),r(t),a(t),s(t),i(t)}))};d.a.render(Object(o.jsx)(l.a.StrictMode,{children:Object(o.jsx)(dt,{})}),document.getElementById("root")),pt()}},[[846,1,2]]]);
  //# sourceMappingURL=main.0ab8da6d.chunk.js.map