@devtable/dashboard 1.20.0 → 1.24.0

package/dist/dashboard.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 import React from "react";
 import _ from "lodash";
 import RGL, { WidthProvider } from "react-grid-layout";
-import { Popover, Tooltip, Group, Text, ActionIcon, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, SegmentedControl, NumberInput, Slider, ColorInput, Accordion, JsonInput, Modal, AppShell, Tabs, Menu, Divider, Container, Textarea } from "@mantine/core";
+import { Popover, Tooltip, Group, Text, ActionIcon, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, Slider, SegmentedControl, NumberInput, Accordion, ColorInput, Divider, JsonInput, Modal, AppShell, Tabs, Menu, Container, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
 import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, Database, Recycle, Share } from "tabler-icons-react";
@@ -44,7 +44,7 @@ import RichTextEditor, { RichTextEditor as RichTextEditor$1 } from "@mantine/rte
 import { useInputState, useElementSize, randomId } from "@mantine/hooks";
 import ReactEChartsCore from "echarts-for-react/lib/core";
 import * as echarts from "echarts/core";
-import { SunburstChart, BarChart, LineChart, PieChart } from "echarts/charts";
+import { SunburstChart, BarChart, LineChart, ScatterChart, PieChart } from "echarts/charts";
 import { CanvasRenderer } from "echarts/renderers";
 import { GridComponent, LegendComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
 import numbro from "numbro";
@@ -109,20 +109,20 @@ function explainSQL(sql, context, definitions) {
 const APIClient = {
   baseURL: "http://localhost:31200",
   getRequest(method) {
-    return (url, data, options = {}) => {
+    return (url, data, options2 = {}) => {
       const headers = __spreadValues({
         "X-Requested-With": "XMLHttpRequest",
-        "Content-Type": options.string ? "application/x-www-form-urlencoded" : "application/json"
-      }, options.headers);
+        "Content-Type": options2.string ? "application/x-www-form-urlencoded" : "application/json"
+      }, options2.headers);
       const conf = {
         baseURL: this.baseURL,
         method,
         url,
-        params: method === "GET" ? data : options.params,
+        params: method === "GET" ? data : options2.params,
         headers
       };
       if (method === "POST") {
-        conf.data = options.string ? JSON.stringify(data) : data;
+        conf.data = options2.string ? JSON.stringify(data) : data;
       }
       return axios(conf).then((res) => {
         return res.data;
@@ -196,6 +196,7 @@ const initialContext = {
   }
 };
 const DefinitionContext = React.createContext(initialContext);
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -590,7 +591,7 @@ function PickQuery({}) {
     data,
     loading
   } = React.useContext(PanelContext);
-  const options = React.useMemo(() => {
+  const options2 = React.useMemo(() => {
     return queries.map((d) => ({
       value: d.id,
       label: d.id
@@ -609,7 +610,7 @@ function PickQuery({}) {
       children: [/* @__PURE__ */ jsx(Text, {
         children: "Select a Query"
       }), /* @__PURE__ */ jsx(Select, {
-        data: options,
+        data: options2,
         value: queryID,
         onChange: setQueryID,
         allowDeselect: false,
@@ -688,7 +689,1307 @@ function Sunbrust({
     }
   });
 }
-echarts.use([BarChart, LineChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
+var ecStat = { exports: {} };
+(function(module, exports) {
+  (function webpackUniversalModuleDefinition(root, factory) {
+    module.exports = factory();
+  })(commonjsGlobal, function() {
+    return function(modules) {
+      var installedModules = {};
+      function __webpack_require__(moduleId) {
+        if (installedModules[moduleId])
+          return installedModules[moduleId].exports;
+        var module2 = installedModules[moduleId] = {
+          exports: {},
+          id: moduleId,
+          loaded: false
+        };
+        modules[moduleId].call(module2.exports, module2, module2.exports, __webpack_require__);
+        module2.loaded = true;
+        return module2.exports;
+      }
+      __webpack_require__.m = modules;
+      __webpack_require__.c = installedModules;
+      __webpack_require__.p = "";
+      return __webpack_require__(0);
+    }([
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          return {
+            clustering: __webpack_require__(1),
+            regression: __webpack_require__(5),
+            statistics: __webpack_require__(6),
+            histogram: __webpack_require__(15),
+            transform: {
+              regression: __webpack_require__(18),
+              histogram: __webpack_require__(21),
+              clustering: __webpack_require__(22)
+            }
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var dataProcess = __webpack_require__(2);
+          var dataPreprocess = dataProcess.dataPreprocess;
+          var normalizeDimensions = dataProcess.normalizeDimensions;
+          var arrayUtil = __webpack_require__(3);
+          var numberUtil = __webpack_require__(4);
+          var arraySize = arrayUtil.size;
+          var sumOfColumn = arrayUtil.sumOfColumn;
+          var arraySum = arrayUtil.sum;
+          var zeros = arrayUtil.zeros;
+          var numberUtil = __webpack_require__(4);
+          var isNumber = numberUtil.isNumber;
+          var mathPow = Math.pow;
+          var OutputType = {
+            SINGLE: "single",
+            MULTIPLE: "multiple"
+          };
+          function kMeans(data, k2, dataMeta) {
+            var clusterAssigned = zeros(data.length, 2);
+            var centroids = createRandCent(k2, calcExtents(data, dataMeta.dimensions));
+            var clusterChanged = true;
+            var minDist;
+            var minIndex;
+            var distIJ;
+            var ptsInClust;
+            while (clusterChanged) {
+              clusterChanged = false;
+              for (var i = 0; i < data.length; i++) {
+                minDist = Infinity;
+                minIndex = -1;
+                for (var j = 0; j < k2; j++) {
+                  distIJ = distEuclid(data[i], centroids[j], dataMeta);
+                  if (distIJ < minDist) {
+                    minDist = distIJ;
+                    minIndex = j;
+                  }
+                }
+                if (clusterAssigned[i][0] !== minIndex) {
+                  clusterChanged = true;
+                }
+                clusterAssigned[i][0] = minIndex;
+                clusterAssigned[i][1] = minDist;
+              }
+              for (var i = 0; i < k2; i++) {
+                ptsInClust = [];
+                for (var j = 0; j < clusterAssigned.length; j++) {
+                  if (clusterAssigned[j][0] === i) {
+                    ptsInClust.push(data[j]);
+                  }
+                }
+                centroids[i] = meanInColumns(ptsInClust, dataMeta);
+              }
+            }
+            var clusterWithKmeans = {
+              centroids,
+              clusterAssigned
+            };
+            return clusterWithKmeans;
+          }
+          function meanInColumns(dataList, dataMeta) {
+            var meanArray = [];
+            var sum;
+            var mean;
+            for (var j = 0; j < dataMeta.dimensions.length; j++) {
+              var dimIdx = dataMeta.dimensions[j];
+              sum = 0;
+              for (var i = 0; i < dataList.length; i++) {
+                sum += dataList[i][dimIdx];
+              }
+              mean = sum / dataList.length;
+              meanArray.push(mean);
+            }
+            return meanArray;
+          }
+          function hierarchicalKMeans(data, clusterCountOrConfig, stepByStep) {
+            var config = (isNumber(clusterCountOrConfig) ? { clusterCount: clusterCountOrConfig, stepByStep } : clusterCountOrConfig) || { clusterCount: 2 };
+            var k2 = config.clusterCount;
+            if (k2 < 2) {
+              return;
+            }
+            var dataMeta = parseDataMeta(data, config);
+            var isOutputTypeSingle = dataMeta.outputType === OutputType.SINGLE;
+            var dataSet = dataPreprocess(data, { dimensions: dataMeta.dimensions });
+            var clusterAssment = zeros(dataSet.length, 2);
+            var outputSingleData;
+            var setClusterIndex;
+            var getClusterIndex;
+            function setDistance(dataIndex, dist2) {
+              clusterAssment[dataIndex][1] = dist2;
+            }
+            function getDistance(dataIndex) {
+              return clusterAssment[dataIndex][1];
+            }
+            if (isOutputTypeSingle) {
+              outputSingleData = [];
+              var outputClusterIndexDimension = dataMeta.outputClusterIndexDimension;
+              setClusterIndex = function(dataIndex, clusterIndex) {
+                outputSingleData[dataIndex][outputClusterIndexDimension] = clusterIndex;
+              };
+              getClusterIndex = function(dataIndex) {
+                return outputSingleData[dataIndex][outputClusterIndexDimension];
+              };
+              for (var i = 0; i < dataSet.length; i++) {
+                outputSingleData.push(dataSet[i].slice());
+                setDistance(i, 0);
+                setClusterIndex(i, 0);
+              }
+            } else {
+              setClusterIndex = function(dataIndex, clusterIndex) {
+                clusterAssment[dataIndex][0] = clusterIndex;
+              };
+              getClusterIndex = function(dataIndex) {
+                return clusterAssment[dataIndex][0];
+              };
+            }
+            var centroid0 = meanInColumns(dataSet, dataMeta);
+            var centList = [centroid0];
+            for (var i = 0; i < dataSet.length; i++) {
+              var dist = distEuclid(dataSet[i], centroid0, dataMeta);
+              setDistance(i, dist);
+            }
+            var lowestSSE;
+            var ptsInClust;
+            var ptsNotClust;
+            var clusterInfo;
+            var sseSplit;
+            var sseNotSplit;
+            var index2 = 1;
+            var result = {
+              data: outputSingleData,
+              centroids: centList,
+              isEnd: false
+            };
+            if (!isOutputTypeSingle) {
+              result.clusterAssment = clusterAssment;
+            }
+            function oneStep() {
+              if (index2 < k2) {
+                lowestSSE = Infinity;
+                var centSplit;
+                var newCentroid;
+                var newClusterAss;
+                for (var j = 0; j < centList.length; j++) {
+                  ptsInClust = [];
+                  ptsNotClust = [];
+                  for (var i2 = 0; i2 < dataSet.length; i2++) {
+                    if (getClusterIndex(i2) === j) {
+                      ptsInClust.push(dataSet[i2]);
+                    } else {
+                      ptsNotClust.push(getDistance(i2));
+                    }
+                  }
+                  clusterInfo = kMeans(ptsInClust, 2, dataMeta);
+                  sseSplit = sumOfColumn(clusterInfo.clusterAssigned, 1);
+                  sseNotSplit = arraySum(ptsNotClust);
+                  if (sseSplit + sseNotSplit < lowestSSE) {
+                    lowestSSE = sseNotSplit + sseSplit;
+                    centSplit = j;
+                    newCentroid = clusterInfo.centroids;
+                    newClusterAss = clusterInfo.clusterAssigned;
+                  }
+                }
+                for (var i2 = 0; i2 < newClusterAss.length; i2++) {
+                  if (newClusterAss[i2][0] === 0) {
+                    newClusterAss[i2][0] = centSplit;
+                  } else if (newClusterAss[i2][0] === 1) {
+                    newClusterAss[i2][0] = centList.length;
+                  }
+                }
+                centList[centSplit] = newCentroid[0];
+                centList.push(newCentroid[1]);
+                for (var i2 = 0, j = 0; i2 < dataSet.length && j < newClusterAss.length; i2++) {
+                  if (getClusterIndex(i2) === centSplit) {
+                    setClusterIndex(i2, newClusterAss[j][0]);
+                    setDistance(i2, newClusterAss[j++][1]);
+                  }
+                }
+                var pointInClust = [];
+                if (!isOutputTypeSingle) {
+                  for (var i2 = 0; i2 < centList.length; i2++) {
+                    pointInClust[i2] = [];
+                    for (var j = 0; j < dataSet.length; j++) {
+                      if (getClusterIndex(j) === i2) {
+                        pointInClust[i2].push(dataSet[j]);
+                      }
+                    }
+                  }
+                  result.pointsInCluster = pointInClust;
+                }
+                index2++;
+              } else {
+                result.isEnd = true;
+              }
+            }
+            if (!config.stepByStep) {
+              while (oneStep(), !result.isEnd)
+                ;
+            } else {
+              result.next = function() {
+                oneStep();
+                setCentroidToResultData(result, dataMeta);
+                return result;
+              };
+            }
+            setCentroidToResultData(result, dataMeta);
+            return result;
+          }
+          function setCentroidToResultData(result, dataMeta) {
+            var outputCentroidDimensions = dataMeta.outputCentroidDimensions;
+            if (dataMeta.outputType !== OutputType.SINGLE || outputCentroidDimensions == null) {
+              return;
+            }
+            var outputSingleData = result.data;
+            var centroids = result.centroids;
+            for (var i = 0; i < outputSingleData.length; i++) {
+              var line = outputSingleData[i];
+              var clusterIndex = line[dataMeta.outputClusterIndexDimension];
+              var centroid = centroids[clusterIndex];
+              var dimLen = Math.min(centroid.length, outputCentroidDimensions.length);
+              for (var j = 0; j < dimLen; j++) {
+                line[outputCentroidDimensions[j]] = centroid[j];
+              }
+            }
+          }
+          function createRandCent(k2, extents) {
+            var centroids = zeros(k2, extents.length);
+            for (var j = 0; j < extents.length; j++) {
+              var extentItem = extents[j];
+              for (var i = 0; i < k2; i++) {
+                centroids[i][j] = extentItem.min + extentItem.span * Math.random();
+              }
+            }
+            return centroids;
+          }
+          function distEuclid(dataItem, centroid, dataMeta) {
+            var powerSum = 0;
+            var dimensions = dataMeta.dimensions;
+            var extents = dataMeta.rawExtents;
+            for (var i = 0; i < dimensions.length; i++) {
+              var span = extents[i].span;
+              if (span) {
+                var dimIdx = dimensions[i];
+                var dist = (dataItem[dimIdx] - centroid[i]) / span;
+                powerSum += mathPow(dist, 2);
+              }
+            }
+            return powerSum;
+          }
+          function parseDataMeta(dataSet, config) {
+            var size = arraySize(dataSet);
+            if (size.length < 1) {
+              throw new Error("The input data of clustering should be two-dimension array.");
+            }
+            var colCount = size[1];
+            var defaultDimensions = [];
+            for (var i = 0; i < colCount; i++) {
+              defaultDimensions.push(i);
+            }
+            var dimensions = normalizeDimensions(config.dimensions, defaultDimensions);
+            var outputType = config.outputType || OutputType.MULTIPLE;
+            var outputClusterIndexDimension = config.outputClusterIndexDimension;
+            if (outputType === OutputType.SINGLE && !numberUtil.isNumber(outputClusterIndexDimension)) {
+              throw new Error("outputClusterIndexDimension is required as a number.");
+            }
+            var extents = calcExtents(dataSet, dimensions);
+            return {
+              dimensions,
+              rawExtents: extents,
+              outputType,
+              outputClusterIndexDimension,
+              outputCentroidDimensions: config.outputCentroidDimensions
+            };
+          }
+          function calcExtents(dataSet, dimensions) {
+            var extents = [];
+            var dimLen = dimensions.length;
+            for (var i = 0; i < dimLen; i++) {
+              extents.push({ min: Infinity, max: -Infinity });
+            }
+            for (var i = 0; i < dataSet.length; i++) {
+              var line = dataSet[i];
+              for (var j = 0; j < dimLen; j++) {
+                var extentItem = extents[j];
+                var val = line[dimensions[j]];
+                extentItem.min > val && (extentItem.min = val);
+                extentItem.max < val && (extentItem.max = val);
+              }
+            }
+            for (var i = 0; i < dimLen; i++) {
+              extents[i].span = extents[i].max - extents[i].min;
+            }
+            return extents;
+          }
+          return {
+            OutputType,
+            hierarchicalKMeans
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var array = __webpack_require__(3);
+          var isArray = array.isArray;
+          var size = array.size;
+          var number2 = __webpack_require__(4);
+          var isNumber = number2.isNumber;
+          function normalizeDimensions(dimensions, defaultDimensions) {
+            return typeof dimensions === "number" ? [dimensions] : dimensions == null ? defaultDimensions : dimensions;
+          }
+          function dataPreprocess(data, opt) {
+            opt = opt || {};
+            var dimensions = opt.dimensions;
+            var numberDimensionMap = {};
+            if (dimensions != null) {
+              for (var i = 0; i < dimensions.length; i++) {
+                numberDimensionMap[dimensions[i]] = true;
+              }
+            }
+            var targetOneDim = opt.toOneDimensionArray ? dimensions ? dimensions[0] : 0 : null;
+            function shouldBeNumberDimension(dimIdx) {
+              return !dimensions || numberDimensionMap.hasOwnProperty(dimIdx);
+            }
+            if (!isArray(data)) {
+              throw new Error("Invalid data type, you should input an array");
+            }
+            var predata = [];
+            var arraySize = size(data);
+            if (arraySize.length === 1) {
+              for (var i = 0; i < arraySize[0]; i++) {
+                var item = data[i];
+                if (isNumber(item)) {
+                  predata.push(item);
+                }
+              }
+            } else if (arraySize.length === 2) {
+              for (var i = 0; i < arraySize[0]; i++) {
+                var isCorrect = true;
+                var item = data[i];
+                for (var j = 0; j < arraySize[1]; j++) {
+                  if (shouldBeNumberDimension(j) && !isNumber(item[j])) {
+                    isCorrect = false;
+                  }
+                }
+                if (isCorrect) {
+                  predata.push(targetOneDim != null ? item[targetOneDim] : item);
+                }
+              }
+            }
+            return predata;
+          }
+          function getPrecision(val) {
+            var str = val.toString();
+            var dotIndex = str.indexOf(".");
+            return dotIndex < 0 ? 0 : str.length - 1 - dotIndex;
+          }
+          return {
+            normalizeDimensions,
+            dataPreprocess,
+            getPrecision
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var objToString = Object.prototype.toString;
+          var arrayProto = Array.prototype;
+          var nativeMap = arrayProto.map;
+          function size(data) {
+            var s = [];
+            while (isArray(data)) {
+              s.push(data.length);
+              data = data[0];
+            }
+            return s;
+          }
+          function isArray(value) {
+            return objToString.call(value) === "[object Array]";
+          }
+          function zeros(m2, n2) {
+            var zeroArray = [];
+            for (var i = 0; i < m2; i++) {
+              zeroArray[i] = [];
+              for (var j = 0; j < n2; j++) {
+                zeroArray[i][j] = 0;
+              }
+            }
+            return zeroArray;
+          }
+          function sum(vector) {
+            var sum2 = 0;
+            for (var i = 0; i < vector.length; i++) {
+              sum2 += vector[i];
+            }
+            return sum2;
+          }
+          function sumOfColumn(dataList, n2) {
+            var sum2 = 0;
+            for (var i = 0; i < dataList.length; i++) {
+              sum2 += dataList[i][n2];
+            }
+            return sum2;
+          }
+          function ascending(a, b) {
+            return a > b ? 1 : a < b ? -1 : a === b ? 0 : NaN;
+          }
+          function bisect(array, value, start, end) {
+            if (start == null) {
+              start = 0;
+            }
+            if (end == null) {
+              end = array.length;
+            }
+            while (start < end) {
+              var mid = Math.floor((start + end) / 2);
+              var compare = ascending(array[mid], value);
+              if (compare > 0) {
+                end = mid;
+              } else if (compare < 0) {
+                start = mid + 1;
+              } else {
+                return mid + 1;
+              }
+            }
+            return start;
+          }
+          function map(obj, cb, context) {
+            if (!(obj && cb)) {
+              return;
+            }
+            if (obj.map && obj.map === nativeMap) {
+              return obj.map(cb, context);
+            } else {
+              var result = [];
+              for (var i = 0, len = obj.length; i < len; i++) {
+                result.push(cb.call(context, obj[i], i, obj));
+              }
+              return result;
+            }
+          }
+          return {
+            size,
+            isArray,
+            zeros,
+            sum,
+            sumOfColumn,
+            ascending,
+            bisect,
+            map
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          function isNumber(value) {
+            value = value === null ? NaN : +value;
+            return typeof value === "number" && !isNaN(value);
+          }
+          function isInteger(value) {
+            return isFinite(value) && value === Math.round(value);
+          }
+          function quantityExponent(val) {
+            if (val === 0) {
+              return 0;
+            }
+            var exp = Math.floor(Math.log(val) / Math.LN10);
+            if (val / Math.pow(10, exp) >= 10) {
+              exp++;
+            }
+            return exp;
+          }
+          return {
+            isNumber,
+            isInteger,
+            quantityExponent
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var dataProcess = __webpack_require__(2);
+          var dataPreprocess = dataProcess.dataPreprocess;
+          var normalizeDimensions = dataProcess.normalizeDimensions;
+          var regreMethods = {
+            linear: function(predata, opt) {
+              var xDimIdx = opt.dimensions[0];
+              var yDimIdx = opt.dimensions[1];
+              var sumX = 0;
+              var sumY = 0;
+              var sumXY = 0;
+              var sumXX = 0;
+              var len = predata.length;
+              for (var i = 0; i < len; i++) {
+                var rawItem = predata[i];
+                sumX += rawItem[xDimIdx];
+                sumY += rawItem[yDimIdx];
+                sumXY += rawItem[xDimIdx] * rawItem[yDimIdx];
+                sumXX += rawItem[xDimIdx] * rawItem[xDimIdx];
+              }
+              var gradient = (len * sumXY - sumX * sumY) / (len * sumXX - sumX * sumX);
+              var intercept = sumY / len - gradient * sumX / len;
+              var result = [];
+              for (var j = 0; j < predata.length; j++) {
+                var rawItem = predata[j];
+                var resultItem = rawItem.slice();
+                resultItem[xDimIdx] = rawItem[xDimIdx];
+                resultItem[yDimIdx] = gradient * rawItem[xDimIdx] + intercept;
+                result.push(resultItem);
+              }
+              var expression = "y = " + Math.round(gradient * 100) / 100 + "x + " + Math.round(intercept * 100) / 100;
+              return {
+                points: result,
+                parameter: {
+                  gradient,
+                  intercept
+                },
+                expression
+              };
+            },
+            linearThroughOrigin: function(predata, opt) {
+              var xDimIdx = opt.dimensions[0];
+              var yDimIdx = opt.dimensions[1];
+              var sumXX = 0;
+              var sumXY = 0;
+              for (var i = 0; i < predata.length; i++) {
+                var rawItem = predata[i];
+                sumXX += rawItem[xDimIdx] * rawItem[xDimIdx];
+                sumXY += rawItem[xDimIdx] * rawItem[yDimIdx];
+              }
+              var gradient = sumXY / sumXX;
+              var result = [];
+              for (var j = 0; j < predata.length; j++) {
+                var rawItem = predata[j];
+                var resultItem = rawItem.slice();
+                resultItem[xDimIdx] = rawItem[xDimIdx];
+                resultItem[yDimIdx] = rawItem[xDimIdx] * gradient;
+                result.push(resultItem);
+              }
+              var expression = "y = " + Math.round(gradient * 100) / 100 + "x";
+              return {
+                points: result,
+                parameter: {
+                  gradient
+                },
+                expression
+              };
+            },
+            exponential: function(predata, opt) {
+              var xDimIdx = opt.dimensions[0];
+              var yDimIdx = opt.dimensions[1];
+              var sumX = 0;
+              var sumY = 0;
+              var sumXXY = 0;
+              var sumYlny = 0;
+              var sumXYlny = 0;
+              var sumXY = 0;
+              for (var i = 0; i < predata.length; i++) {
+                var rawItem = predata[i];
+                sumX += rawItem[xDimIdx];
+                sumY += rawItem[yDimIdx];
+                sumXY += rawItem[xDimIdx] * rawItem[yDimIdx];
+                sumXXY += rawItem[xDimIdx] * rawItem[xDimIdx] * rawItem[yDimIdx];
+                sumYlny += rawItem[yDimIdx] * Math.log(rawItem[yDimIdx]);
+                sumXYlny += rawItem[xDimIdx] * rawItem[yDimIdx] * Math.log(rawItem[yDimIdx]);
+              }
+              var denominator = sumY * sumXXY - sumXY * sumXY;
+              var coefficient = Math.pow(Math.E, (sumXXY * sumYlny - sumXY * sumXYlny) / denominator);
+              var index2 = (sumY * sumXYlny - sumXY * sumYlny) / denominator;
+              var result = [];
+              for (var j = 0; j < predata.length; j++) {
+                var rawItem = predata[j];
+                var resultItem = rawItem.slice();
+                resultItem[xDimIdx] = rawItem[xDimIdx];
+                resultItem[yDimIdx] = coefficient * Math.pow(Math.E, index2 * rawItem[xDimIdx]);
+                result.push(resultItem);
+              }
+              var expression = "y = " + Math.round(coefficient * 100) / 100 + "e^(" + Math.round(index2 * 100) / 100 + "x)";
+              return {
+                points: result,
+                parameter: {
+                  coefficient,
+                  index: index2
+                },
+                expression
+              };
+            },
+            logarithmic: function(predata, opt) {
+              var xDimIdx = opt.dimensions[0];
+              var yDimIdx = opt.dimensions[1];
+              var sumlnx = 0;
+              var sumYlnx = 0;
+              var sumY = 0;
+              var sumlnxlnx = 0;
+              for (var i = 0; i < predata.length; i++) {
+                var rawItem = predata[i];
+                sumlnx += Math.log(rawItem[xDimIdx]);
+                sumYlnx += rawItem[yDimIdx] * Math.log(rawItem[xDimIdx]);
+                sumY += rawItem[yDimIdx];
+                sumlnxlnx += Math.pow(Math.log(rawItem[xDimIdx]), 2);
+              }
+              var gradient = (i * sumYlnx - sumY * sumlnx) / (i * sumlnxlnx - sumlnx * sumlnx);
+              var intercept = (sumY - gradient * sumlnx) / i;
+              var result = [];
+              for (var j = 0; j < predata.length; j++) {
+                var rawItem = predata[j];
+                var resultItem = rawItem.slice();
+                resultItem[xDimIdx] = rawItem[xDimIdx];
+                resultItem[yDimIdx] = gradient * Math.log(rawItem[xDimIdx]) + intercept;
+                result.push(resultItem);
+              }
+              var expression = "y = " + Math.round(intercept * 100) / 100 + " + " + Math.round(gradient * 100) / 100 + "ln(x)";
+              return {
+                points: result,
+                parameter: {
+                  gradient,
+                  intercept
+                },
+                expression
+              };
+            },
+            polynomial: function(predata, opt) {
+              var xDimIdx = opt.dimensions[0];
+              var yDimIdx = opt.dimensions[1];
+              var order = opt.order;
+              if (order == null) {
+                order = 2;
+              }
+              var coeMatrix = [];
+              var lhs = [];
+              var k2 = order + 1;
+              for (var i = 0; i < k2; i++) {
+                var sumA = 0;
+                for (var n2 = 0; n2 < predata.length; n2++) {
+                  var rawItem = predata[n2];
+                  sumA += rawItem[yDimIdx] * Math.pow(rawItem[xDimIdx], i);
+                }
+                lhs.push(sumA);
+                var temp = [];
+                for (var j = 0; j < k2; j++) {
+                  var sumB = 0;
+                  for (var m2 = 0; m2 < predata.length; m2++) {
+                    sumB += Math.pow(predata[m2][xDimIdx], i + j);
+                  }
+                  temp.push(sumB);
+                }
+                coeMatrix.push(temp);
+              }
+              coeMatrix.push(lhs);
+              var coeArray = gaussianElimination(coeMatrix, k2);
+              var result = [];
+              for (var i = 0; i < predata.length; i++) {
+                var value = 0;
+                var rawItem = predata[i];
+                for (var n2 = 0; n2 < coeArray.length; n2++) {
+                  value += coeArray[n2] * Math.pow(rawItem[xDimIdx], n2);
+                }
+                var resultItem = rawItem.slice();
+                resultItem[xDimIdx] = rawItem[xDimIdx];
+                resultItem[yDimIdx] = value;
+                result.push(resultItem);
+              }
+              var expression = "y = ";
+              for (var i = coeArray.length - 1; i >= 0; i--) {
+                if (i > 1) {
+                  expression += Math.round(coeArray[i] * Math.pow(10, i + 1)) / Math.pow(10, i + 1) + "x^" + i + " + ";
+                } else if (i === 1) {
+                  expression += Math.round(coeArray[i] * 100) / 100 + "x + ";
+                } else {
+                  expression += Math.round(coeArray[i] * 100) / 100;
+                }
+              }
+              return {
+                points: result,
+                parameter: coeArray,
+                expression
+              };
+            }
+          };
+          function gaussianElimination(matrix, number2) {
+            for (var i = 0; i < matrix.length - 1; i++) {
+              var maxColumn = i;
+              for (var j = i + 1; j < matrix.length - 1; j++) {
+                if (Math.abs(matrix[i][j]) > Math.abs(matrix[i][maxColumn])) {
+                  maxColumn = j;
+                }
+              }
+              for (var k2 = i; k2 < matrix.length; k2++) {
+                var temp = matrix[k2][i];
+                matrix[k2][i] = matrix[k2][maxColumn];
+                matrix[k2][maxColumn] = temp;
+              }
+              for (var n2 = i + 1; n2 < matrix.length - 1; n2++) {
+                for (var m2 = matrix.length - 1; m2 >= i; m2--) {
+                  matrix[m2][n2] -= matrix[m2][i] / matrix[i][i] * matrix[i][n2];
+                }
+              }
+            }
+            var data = new Array(number2);
+            var len = matrix.length - 1;
+            for (var j = matrix.length - 2; j >= 0; j--) {
+              var temp = 0;
+              for (var i = j + 1; i < matrix.length - 1; i++) {
+                temp += matrix[i][j] * data[i];
+              }
+              data[j] = (matrix[len][j] - temp) / matrix[j][j];
+            }
+            return data;
+          }
+          var regression = function(regreMethod, data, optOrOrder) {
+            var opt = typeof optOrOrder === "number" ? { order: optOrOrder } : optOrOrder || {};
+            var dimensions = normalizeDimensions(opt.dimensions, [0, 1]);
+            var predata = dataPreprocess(data, { dimensions });
+            var result = regreMethods[regreMethod](predata, {
+              order: opt.order,
+              dimensions
+            });
+            var xDimIdx = dimensions[0];
+            result.points.sort(function(itemA, itemB) {
+              return itemA[xDimIdx] - itemB[xDimIdx];
+            });
+            return result;
+          };
+          return regression;
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var statistics = {};
+          statistics.max = __webpack_require__(7);
+          statistics.deviation = __webpack_require__(8);
+          statistics.mean = __webpack_require__(10);
+          statistics.median = __webpack_require__(12);
+          statistics.min = __webpack_require__(14);
+          statistics.quantile = __webpack_require__(13);
+          statistics.sampleVariance = __webpack_require__(9);
+          statistics.sum = __webpack_require__(11);
+          return statistics;
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var number2 = __webpack_require__(4);
+          var isNumber = number2.isNumber;
+          function max(data) {
+            var maxData = -Infinity;
+            for (var i = 0; i < data.length; i++) {
+              if (isNumber(data[i]) && data[i] > maxData) {
+                maxData = data[i];
+              }
+            }
+            return maxData;
+          }
+          return max;
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var variance = __webpack_require__(9);
+          return function(data) {
+            var squaredDeviation = variance(data);
+            return squaredDeviation ? Math.sqrt(squaredDeviation) : squaredDeviation;
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var number2 = __webpack_require__(4);
+          var isNumber = number2.isNumber;
+          var mean = __webpack_require__(10);
+          function sampleVariance(data) {
+            var len = data.length;
+            if (!len || len < 2) {
+              return 0;
+            }
+            if (data.length >= 2) {
+              var meanValue = mean(data);
+              var sum = 0;
+              var temple;
+              for (var i = 0; i < data.length; i++) {
+                if (isNumber(data[i])) {
+                  temple = data[i] - meanValue;
+                  sum += temple * temple;
+                }
+              }
+              return sum / (data.length - 1);
+            }
+          }
+          return sampleVariance;
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var sum = __webpack_require__(11);
+          function mean(data) {
+            var len = data.length;
+            if (!len) {
+              return 0;
+            }
+            return sum(data) / data.length;
+          }
+          return mean;
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var number2 = __webpack_require__(4);
+          var isNumber = number2.isNumber;
+          function sum(data) {
+            var len = data.length;
+            if (!len) {
+              return 0;
+            }
+            var sumData = 0;
+            for (var i = 0; i < len; i++) {
+              if (isNumber(data[i])) {
+                sumData += data[i];
+              }
+            }
+            return sumData;
+          }
+          return sum;
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var quantile = __webpack_require__(13);
+          function median2(data) {
+            return quantile(data, 0.5);
+          }
+          return median2;
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          return function(data, p2) {
+            var len = data.length;
+            if (!len) {
+              return 0;
+            }
+            if (p2 <= 0 || len < 2) {
+              return data[0];
+            }
+            if (p2 >= 1) {
+              return data[len - 1];
+            }
+            var h = (len - 1) * p2;
+            var i = Math.floor(h);
+            var a = data[i];
+            var b = data[i + 1];
+            return a + (b - a) * (h - i);
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var number2 = __webpack_require__(4);
+          var isNumber = number2.isNumber;
+          function min(data) {
+            var minData = Infinity;
+            for (var i = 0; i < data.length; i++) {
+              if (isNumber(data[i]) && data[i] < minData) {
+                minData = data[i];
+              }
+            }
+            return minData;
+          }
+          return min;
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var max = __webpack_require__(7);
+          var min = __webpack_require__(14);
+          var quantile = __webpack_require__(13);
+          var deviation = __webpack_require__(8);
+          var dataProcess = __webpack_require__(2);
+          var dataPreprocess = dataProcess.dataPreprocess;
+          var normalizeDimensions = dataProcess.normalizeDimensions;
+          var array = __webpack_require__(3);
+          var ascending = array.ascending;
+          var map = array.map;
+          var range = __webpack_require__(16);
+          var bisect = array.bisect;
+          var tickStep = __webpack_require__(17);
+          function computeBins(data, optOrMethod) {
+            var opt = typeof optOrMethod === "string" ? { method: optOrMethod } : optOrMethod || {};
+            var threshold = opt.method == null ? thresholdMethod.squareRoot : thresholdMethod[opt.method];
+            var dimensions = normalizeDimensions(opt.dimensions);
+            var values = dataPreprocess(data, {
+              dimensions,
+              toOneDimensionArray: true
+            });
+            var maxValue = max(values);
+            var minValue = min(values);
+            var binsNumber = threshold(values, minValue, maxValue);
+            var tickStepResult = tickStep(minValue, maxValue, binsNumber);
+            var step = tickStepResult.step;
+            var toFixedPrecision = tickStepResult.toFixedPrecision;
+            var rangeArray = range(+(Math.ceil(minValue / step) * step).toFixed(toFixedPrecision), +(Math.floor(maxValue / step) * step).toFixed(toFixedPrecision), step, toFixedPrecision);
+            var len = rangeArray.length;
+            var bins = new Array(len + 1);
+            for (var i = 0; i <= len; i++) {
+              bins[i] = {};
+              bins[i].sample = [];
+              bins[i].x0 = i > 0 ? rangeArray[i - 1] : rangeArray[i] - minValue === step ? minValue : rangeArray[i] - step;
+              bins[i].x1 = i < len ? rangeArray[i] : maxValue - rangeArray[i - 1] === step ? maxValue : rangeArray[i - 1] + step;
+            }
+            for (var i = 0; i < values.length; i++) {
+              if (minValue <= values[i] && values[i] <= maxValue) {
+                bins[bisect(rangeArray, values[i], 0, len)].sample.push(values[i]);
+              }
+            }
+            var data = map(bins, function(bin) {
+              return [
+                +((bin.x0 + bin.x1) / 2).toFixed(toFixedPrecision),
+                bin.sample.length,
+                bin.x0,
+                bin.x1,
+                bin.x0 + " - " + bin.x1
+              ];
+            });
+            var customData = map(bins, function(bin) {
+              return [bin.x0, bin.x1, bin.sample.length];
+            });
+            return {
+              bins,
+              data,
+              customData
+            };
+          }
+          var thresholdMethod = {
+            squareRoot: function(data) {
+              var bins = Math.ceil(Math.sqrt(data.length));
+              return bins > 50 ? 50 : bins;
+            },
+            scott: function(data, min2, max2) {
+              return Math.ceil((max2 - min2) / (3.5 * deviation(data) * Math.pow(data.length, -1 / 3)));
+            },
+            freedmanDiaconis: function(data, min2, max2) {
+              data.sort(ascending);
+              return Math.ceil((max2 - min2) / (2 * (quantile(data, 0.75) - quantile(data, 0.25)) * Math.pow(data.length, -1 / 3)));
+            },
+            sturges: function(data) {
+              return Math.ceil(Math.log(data.length) / Math.LN2) + 1;
+            }
+          };
+          return computeBins;
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var dataProcess = __webpack_require__(2);
+          var getPrecision = dataProcess.getPrecision;
+          return function(start, end, step, precision) {
+            var len = arguments.length;
+            if (len < 2) {
+              end = start;
+              start = 0;
+              step = 1;
+            } else if (len < 3) {
+              step = 1;
+            } else if (len < 4) {
+              step = +step;
+              precision = getPrecision(step);
+            } else {
+              precision = +precision;
+            }
+            var n2 = Math.ceil(((end - start) / step).toFixed(precision));
+            var range = new Array(n2 + 1);
+            for (var i = 0; i < n2 + 1; i++) {
+              range[i] = +(start + i * step).toFixed(precision);
+            }
+            return range;
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var numberUtil = __webpack_require__(4);
+          return function(start, stop, count) {
+            var step0 = Math.abs(stop - start) / count;
+            var precision = numberUtil.quantityExponent(step0);
+            var step1 = Math.pow(10, precision);
+            var error = step0 / step1;
+            if (error >= Math.sqrt(50)) {
+              step1 *= 10;
+            } else if (error >= Math.sqrt(10)) {
+              step1 *= 5;
+            } else if (error >= Math.sqrt(2)) {
+              step1 *= 2;
+            }
+            var toFixedPrecision = precision < 0 ? -precision : 0;
+            var resultStep = +(stop >= start ? step1 : -step1).toFixed(toFixedPrecision);
+            return {
+              step: resultStep,
+              toFixedPrecision
+            };
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var regression = __webpack_require__(5);
+          var transformHelper = __webpack_require__(19);
+          var FORMULA_DIMENSION = 2;
+          return {
+            type: "ecStat:regression",
+            transform: function transform(params) {
+              var upstream = params.upstream;
+              var config = params.config || {};
+              var method = config.method || "linear";
+              var result = regression(method, upstream.cloneRawData(), {
+                order: config.order,
+                dimensions: transformHelper.normalizeExistingDimensions(params, config.dimensions)
+              });
+              var points = result.points;
+              var formulaOn = config.formulaOn;
+              if (formulaOn == null) {
+                formulaOn = "end";
+              }
+              var dimensions;
+              if (formulaOn !== "none") {
+                for (var i = 0; i < points.length; i++) {
+                  points[i][FORMULA_DIMENSION] = formulaOn === "start" && i === 0 || formulaOn === "all" || formulaOn === "end" && i === points.length - 1 ? result.expression : "";
+                }
+                dimensions = upstream.cloneAllDimensionInfo();
+                dimensions[FORMULA_DIMENSION] = {};
+              }
+              return [{
+                dimensions,
+                data: points
+              }];
+            }
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var arrayUtil = __webpack_require__(3);
+          var numberUtil = __webpack_require__(4);
+          var objectUtil = __webpack_require__(20);
+          function normalizeExistingDimensions(transformParams, dimensionsConfig) {
+            if (dimensionsConfig == null) {
+              return;
+            }
+            var upstream = transformParams.upstream;
+            if (arrayUtil.isArray(dimensionsConfig)) {
+              var result = [];
+              for (var i = 0; i < dimensionsConfig.length; i++) {
+                var dimInfo = upstream.getDimensionInfo(dimensionsConfig[i]);
+                validateDimensionExists(dimInfo, dimensionsConfig[i]);
+                result[i] = dimInfo.index;
+              }
+              return result;
+            } else {
+              var dimInfo = upstream.getDimensionInfo(dimensionsConfig);
+              validateDimensionExists(dimInfo, dimensionsConfig);
+              return dimInfo.index;
+            }
+            function validateDimensionExists(dimInfo2, dimConfig) {
+              if (!dimInfo2) {
+                throw new Error("Can not find dimension by " + dimConfig);
+              }
+            }
+          }
+          function normalizeNewDimensions(dimensionsConfig) {
+            if (arrayUtil.isArray(dimensionsConfig)) {
+              var names = [];
+              var indices = [];
+              for (var i = 0; i < dimensionsConfig.length; i++) {
+                var item = parseDimensionNewItem(dimensionsConfig[i]);
+                names.push(item.name);
+                indices.push(item.index);
+              }
+              return { name: names, index: indices };
+            } else if (dimensionsConfig != null) {
+              return parseDimensionNewItem(dimensionsConfig);
+            }
+            function parseDimensionNewItem(dimConfig) {
+              if (numberUtil.isNumber(dimConfig)) {
+                return { index: dimConfig };
+              } else if (objectUtil.isObject(dimConfig) && numberUtil.isNumber(dimConfig.index)) {
+                return dimConfig;
+              }
+              throw new Error("Illegle new dimensions config. Expect `{ name: string, index: number }`.");
+            }
+          }
+          return {
+            normalizeExistingDimensions,
+            normalizeNewDimensions
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          function extend(target, source) {
+            if (Object.assign) {
+              Object.assign(target, source);
+            } else {
+              for (var key in source) {
+                if (source.hasOwnProperty(key)) {
+                  target[key] = source[key];
+                }
+              }
+            }
+            return target;
+          }
+          function isObject(value) {
+            const type = typeof value;
+            return type === "function" || !!value && type === "object";
+          }
+          return {
+            extend,
+            isObject
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var histogram = __webpack_require__(15);
+          var transformHelper = __webpack_require__(19);
+          return {
+            type: "ecStat:histogram",
+            transform: function transform(params) {
+              var upstream = params.upstream;
+              var config = params.config || {};
+              var result = histogram(upstream.cloneRawData(), {
+                method: config.method,
+                dimensions: transformHelper.normalizeExistingDimensions(params, config.dimensions)
+              });
+              return [{
+                dimensions: ["MeanOfV0V1", "VCount", "V0", "V1", "DisplayableName"],
+                data: result.data
+              }, {
+                data: result.customData
+              }];
+            }
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      },
+      function(module2, exports2, __webpack_require__) {
+        var __WEBPACK_AMD_DEFINE_RESULT__;
+        !(__WEBPACK_AMD_DEFINE_RESULT__ = function(require2) {
+          var clustering = __webpack_require__(1);
+          var numberUtil = __webpack_require__(4);
+          var transformHelper = __webpack_require__(19);
+          var isNumber = numberUtil.isNumber;
+          return {
+            type: "ecStat:clustering",
+            transform: function transform(params) {
+              var upstream = params.upstream;
+              var config = params.config || {};
+              var clusterCount = config.clusterCount;
+              if (!isNumber(clusterCount) || clusterCount <= 0) {
+                throw new Error('config param "clusterCount" need to be specified as an interger greater than 1.');
+              }
+              if (clusterCount === 1) {
+                return [{}, {
+                  data: []
+                }];
+              }
+              var outputClusterIndexDimension = transformHelper.normalizeNewDimensions(config.outputClusterIndexDimension);
+              var outputCentroidDimensions = transformHelper.normalizeNewDimensions(config.outputCentroidDimensions);
+              if (outputClusterIndexDimension == null) {
+                throw new Error("outputClusterIndexDimension is required as a number.");
+              }
+              var result = clustering.hierarchicalKMeans(upstream.cloneRawData(), {
+                clusterCount,
+                stepByStep: false,
+                dimensions: transformHelper.normalizeExistingDimensions(params, config.dimensions),
+                outputType: clustering.OutputType.SINGLE,
+                outputClusterIndexDimension: outputClusterIndexDimension.index,
+                outputCentroidDimensions: (outputCentroidDimensions || {}).index
+              });
+              var sourceDimAll = upstream.cloneAllDimensionInfo();
+              var resultDimsDef = [];
+              for (var i = 0; i < sourceDimAll.length; i++) {
+                var sourceDimItem = sourceDimAll[i];
+                resultDimsDef.push(sourceDimItem.name);
+              }
+              resultDimsDef[outputClusterIndexDimension.index] = outputClusterIndexDimension.name;
+              if (outputCentroidDimensions) {
+                for (var i = 0; i < outputCentroidDimensions.index.length; i++) {
+                  if (outputCentroidDimensions.name[i] != null) {
+                    resultDimsDef[outputCentroidDimensions.index[i]] = outputCentroidDimensions.name[i];
+                  }
+                }
+              }
+              return [{
+                dimensions: resultDimsDef,
+                data: result.data
+              }, {
+                data: result.centroids
+              }];
+            }
+          };
+        }.call(exports2, __webpack_require__, exports2, module2), __WEBPACK_AMD_DEFINE_RESULT__ !== void 0 && (module2.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+      }
+    ]);
+  });
+})(ecStat);
+var echartsStat = ecStat.exports;
+function getRegressionConfs({ regressions = [] }, data) {
+  const regressionDataSets = [];
+  const regressionSeries = [];
+  const regressionXAxes = [];
+  if (data.length === 0) {
+    return { regressionDataSets, regressionSeries, regressionXAxes };
+  }
+  regressions.forEach(({ transform, plot, name, y_axis_data_key }) => {
+    const xAxisId = `x-axis-for-${name}`;
+    const rawDatasetId = `dataset-for-${name}--raw`;
+    const regDatasetId = `dataset-for-${name}--transformed`;
+    regressionDataSets.push({
+      id: rawDatasetId,
+      source: data.map((d, i) => [i, d[y_axis_data_key]])
+    });
+    regressionDataSets.push({
+      transform,
+      id: regDatasetId,
+      fromDatasetId: rawDatasetId
+    });
+    regressionSeries.push(__spreadProps(__spreadValues({}, plot), {
+      name,
+      datasetId: regDatasetId,
+      xAxisId,
+      showSymbol: false,
+      tooltip: {
+        show: false
+      }
+    }));
+    regressionXAxes.push({
+      type: "category",
+      id: xAxisId,
+      datasetId: regDatasetId,
+      show: false
+    });
+  });
+  return { regressionDataSets, regressionSeries, regressionXAxes };
+}
 const defaultOption$1 = {
   legend: {
     show: true,
@@ -714,115 +2015,103 @@ const defaultOption$1 = {
     containLabel: true
   }
 };
-function VizCartesianChart({
-  conf,
-  data,
-  width,
-  height
-}) {
-  const option = React.useMemo(() => {
-    var _c;
-    const labelFormatters = conf.y_axes.reduce((ret, {
-      label_formatter
-    }, index2) => {
-      ret[index2] = function formatter(payload) {
-        const value = typeof payload === "object" ? payload.value : payload;
-        if (!label_formatter) {
-          return value;
-        }
-        try {
-          return numbro(value).format(label_formatter);
-        } catch (error) {
-          console.error(error);
-          return value;
-        }
-      };
-      return ret;
-    }, {
-      default: ({
-        value
-      }) => value
-    });
-    const yAxisIndexMap = conf.series.reduce((ret, {
-      yAxisIndex,
-      name
-    }) => {
-      ret[name] = yAxisIndex;
-      return ret;
-    }, {});
-    const series = conf.series.map((_a) => {
-      var _b = _a, {
-        y_axis_data_key,
-        yAxisIndex,
-        label_position,
-        name
-      } = _b, rest = __objRest(_b, [
-        "y_axis_data_key",
-        "yAxisIndex",
-        "label_position",
-        "name"
-      ]);
-      const ret = __spreadValues({
-        data: data.map((d) => d[y_axis_data_key]),
-        label: {
-          show: !!label_position,
-          position: label_position,
-          formatter: labelFormatters[yAxisIndex != null ? yAxisIndex : "default"]
-        },
-        name,
-        yAxisIndex
-      }, rest);
-      return ret;
-    });
-    const customOptions = {
-      xAxis: {
+function getOption(conf, data) {
+  var _c;
+  const labelFormatters = conf.y_axes.reduce((ret, { label_formatter }, index2) => {
+    ret[index2] = function formatter(payload) {
+      const value = typeof payload === "object" ? payload.value : payload;
+      if (!label_formatter) {
+        return value;
+      }
+      try {
+        return numbro(value).format(label_formatter);
+      } catch (error) {
+        console.error(error);
+        return value;
+      }
+    };
+    return ret;
+  }, {
+    default: ({ value }) => value
+  });
+  const yAxisIndexMap = conf.series.reduce((ret, { yAxisIndex, name }) => {
+    ret[name] = yAxisIndex;
+    return ret;
+  }, {});
+  const series = conf.series.map((_a) => {
+    var _b = _a, { y_axis_data_key, yAxisIndex, label_position, name } = _b, rest = __objRest(_b, ["y_axis_data_key", "yAxisIndex", "label_position", "name"]);
+    const ret = __spreadValues({
+      data: data.map((d) => d[y_axis_data_key]),
+      label: {
+        show: !!label_position,
+        position: label_position,
+        formatter: labelFormatters[yAxisIndex != null ? yAxisIndex : "default"]
+      },
+      name,
+      xAxisId: "main-x-axis",
+      yAxisIndex
+    }, rest);
+    return ret;
+  });
+  const { regressionDataSets, regressionSeries, regressionXAxes } = getRegressionConfs(conf, data);
+  const customOptions = {
+    xAxis: [
+      {
         data: data.map((d) => d[conf.x_axis_data_key]),
-        name: (_c = conf.x_axis_name) != null ? _c : ""
+        name: (_c = conf.x_axis_name) != null ? _c : "",
+        id: "main-x-axis"
       },
-      yAxis: conf.y_axes.map((_d, index2) => {
-        var _e = _d, {
-          label_formatter
-        } = _e, rest = __objRest(_e, [
-          "label_formatter"
-        ]);
-        var _a;
-        return __spreadProps(__spreadValues({}, rest), {
-          axisLabel: {
-            show: true,
-            formatter: (_a = labelFormatters[index2]) != null ? _a : labelFormatters.default
+      ...regressionXAxes
+    ],
+    yAxis: conf.y_axes.map((_d, index2) => {
+      var _e = _d, { label_formatter } = _e, rest = __objRest(_e, ["label_formatter"]);
+      var _a;
+      return __spreadProps(__spreadValues({}, rest), {
+        axisLabel: {
+          show: true,
+          formatter: (_a = labelFormatters[index2]) != null ? _a : labelFormatters.default
+        }
+      });
+    }),
+    dataset: [
+      ...regressionDataSets
+    ],
+    series: [
+      ...series,
+      ...regressionSeries
+    ],
+    tooltip: {
+      formatter: function(params) {
+        const arr = Array.isArray(params) ? params : [params];
+        if (arr.length === 0) {
+          return "";
+        }
+        const lines = arr.map(({ seriesName, value }) => {
+          var _a;
+          if (!seriesName) {
+            return value;
           }
+          const yAxisIndex = yAxisIndexMap[seriesName];
+          const formatter = (_a = labelFormatters[yAxisIndex]) != null ? _a : labelFormatters.default;
+          return `${seriesName}: ${formatter({ value })}`;
         });
-      }),
-      dataset: {
-        source: data
-      },
-      series,
-      tooltip: {
-        formatter: function(params) {
-          const arr = Array.isArray(params) ? params : [params];
-          if (arr.length === 0) {
-            return "";
-          }
-          const lines = arr.map(({
-            seriesName,
-            value
-          }) => {
-            var _a;
-            if (!seriesName) {
-              return value;
-            }
-            const yAxisIndex = yAxisIndexMap[seriesName];
-            const formatter = (_a = labelFormatters[yAxisIndex]) != null ? _a : labelFormatters.default;
-            return `${seriesName}: ${formatter({
-              value
-            })}`;
-          });
-          lines.unshift(`<strong>${arr[0].name}</strong>`);
-          return lines.join("<br />");
-        }
+        lines.unshift(`<strong>${arr[0].name}</strong>`);
+        return lines.join("<br />");
       }
-    };
-    return _.merge({}, defaultOption$1, customOptions);
+    }
+  };
+  return _.merge({}, defaultOption$1, customOptions);
+}
+echarts.use([BarChart, LineChart, ScatterChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
+echarts.registerTransform(echartsStat.transform.regression);
+function VizCartesianChart({
+  conf,
+  data,
+  width,
+  height
+}) {
+  const option = React.useMemo(() => {
+    return getOption(conf, data);
   }, [conf, data]);
   if (!width || !height) {
     return null;
@@ -1171,6 +2460,32 @@ function VizPie({
     }
   });
 }
+function median(numbers) {
+  const sorted = Array.from(numbers).sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+  if (sorted.length % 2 === 0) {
+    return (sorted[middle - 1] + sorted[middle]) / 2;
+  }
+  return sorted[middle];
+}
+function aggregateValue(data, data_field, aggregation) {
+  var _a, _b, _c;
+  const numbers = data.map((d) => d[data_field]);
+  switch (aggregation) {
+    case "sum":
+      return _.sum(numbers);
+    case "mean":
+      return _.mean(numbers);
+    case "median":
+      return median(numbers);
+    case "max":
+      return (_a = _.max(numbers)) != null ? _a : 0;
+    case "min":
+      return (_b = _.min(numbers)) != null ? _b : 0;
+    default:
+      return (_c = data[0]) == null ? void 0 : _c[data_field];
+  }
+}
 var invariant = function() {
 };
 const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
@@ -1537,14 +2852,12 @@ class InterpolateColor {
     return this.mapper(value);
   }
 }
-function getColorByColorConf(conf, dataRow) {
+function getColorByColorConf(conf, value) {
   if (conf.type === "static") {
     return conf.staticColor;
   }
   if (conf.type === "continuous") {
-    const mapper = new InterpolateColor(conf);
-    const value = dataRow[conf.valueField];
-    return mapper.getColor(value);
+    return new InterpolateColor(conf).getColor(value);
   }
   return "black";
 }
@@ -1560,46 +2873,108 @@ function getNonStatsDataText(data) {
   }
   return data.toString();
 }
-function VizStats(_a) {
-  var _b = _a, {
-    conf: _c
-  } = _b, _d = _c, {
-    content,
+function variablesToElements(variables, data) {
+  const ret = {};
+  variables.forEach(({
+    name,
+    color: color2,
+    data_field,
+    aggregation,
     size,
-    color: color2
-  } = _d, rest = __objRest(_d, [
-    "content",
-    "size",
-    "color"
-  ]), {
-    data
-  } = _b;
-  const finalColor = React.useMemo(() => {
-    return getColorByColorConf(color2, data[0]);
-  }, [color2, data]);
-  const finalContent = React.useMemo(() => {
-    var _a2;
-    const {
-      prefix,
-      postfix,
-      data_field,
-      formatter
-    } = content;
-    const contentData = (_a2 = data == null ? void 0 : data[0]) == null ? void 0 : _a2[data_field];
-    if (!["string", "number"].includes(typeof contentData)) {
-      return getNonStatsDataText(contentData);
+    weight,
+    formatter
+  }) => {
+    const value = aggregateValue(data, data_field, aggregation);
+    let valueContent = "";
+    if (!["string", "number"].includes(typeof value)) {
+      valueContent = getNonStatsDataText(value);
+    } else {
+      valueContent = numbro(value).format(formatter);
     }
-    const contents = [prefix, numbro(contentData).format(formatter), postfix];
-    return contents.join(" ");
-  }, [content, data]);
-  return /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({}, rest), {
-    color: finalColor,
-    sx: {
-      fontSize: size
-    },
-    children: finalContent
+    ret[name] = /* @__PURE__ */ jsx(Text, {
+      sx: {
+        fontSize: size,
+        display: "inline"
+      },
+      color: getColorByColorConf(color2, value),
+      weight,
+      children: valueContent
+    });
+  });
+  return ret;
+}
+function preserveWhiteSpaces(text) {
+  return text.split(" ").map((s) => /* @__PURE__ */ jsxs(Fragment, {
+    children: [s, "\xA0"]
   }));
 }
+function withLineBreaks(text) {
+  const normalized = text.replaceAll("<br />", "<br/>").replaceAll("\n", "<br/>");
+  const splitted = normalized.split("<br/>");
+  const ret = splitted.map((t, i) => {
+    const arr = [preserveWhiteSpaces(t)];
+    if (i !== splitted.length - 1) {
+      arr.push(/* @__PURE__ */ jsx("br", {}));
+    }
+    return arr;
+  }).flat().filter((t) => t !== void 0);
+  return ret;
+}
+function textToJSX(text) {
+  return withLineBreaks(text);
+}
+function templateToJSX(template, variables, data) {
+  const variableElements = variablesToElements(variables, data);
+  const regx = /^\{(.+)\}(.*)$/;
+  return template.split("$").map((text) => {
+    var _a;
+    const match = regx.exec(text);
+    if (!match) {
+      return textToJSX(text);
+    }
+    const element = variableElements[match[1]];
+    if (!element) {
+      return textToJSX(text);
+    }
+    const rest = (_a = match[2]) != null ? _a : "";
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [element, textToJSX(rest)]
+    });
+  });
+}
+function VizStats({
+  conf: {
+    template,
+    variables,
+    align
+  },
+  data
+}) {
+  const contents = React.useMemo(() => {
+    return templateToJSX(template, variables, data);
+  }, [template, variables, data]);
+  return /* @__PURE__ */ jsx(Text, {
+    align,
+    children: Object.values(contents).map((c) => c)
+  });
+}
+function VizRichText({
+  conf,
+  width,
+  height
+}) {
+  if (!width || !height) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(RichTextEditor, {
+    readOnly: true,
+    value: conf.content,
+    onChange: _.noop,
+    sx: {
+      border: "none"
+    }
+  });
+}
 function renderViz(width, height, data, viz) {
   const props = {
     width,
@@ -1610,7 +2985,6 @@ function renderViz(width, height, data, viz) {
   switch (viz.type) {
     case "sunburst":
       return /* @__PURE__ */ jsx(Sunbrust, __spreadValues({}, props));
-    case "line-bar":
     case "cartesian":
       return /* @__PURE__ */ jsx(VizCartesianChart, __spreadValues({}, props));
     case "table":
@@ -1619,6 +2993,8 @@ function renderViz(width, height, data, viz) {
       return /* @__PURE__ */ jsx(VizText, __spreadValues({}, props));
     case "stats":
       return /* @__PURE__ */ jsx(VizStats, __spreadValues({}, props));
+    case "rich-text":
+      return /* @__PURE__ */ jsx(VizRichText, __spreadValues({}, props));
     case "bar-3d":
       return /* @__PURE__ */ jsx(VizBar3D, __spreadValues({}, props));
     case "pie":
@@ -1627,6 +3003,7 @@ function renderViz(width, height, data, viz) {
       return null;
   }
 }
+const typesDontNeedData = ["rich-text"];
 function Viz({
   viz,
   data,
@@ -1637,6 +3014,16 @@ function Viz({
     width,
     height
   } = useElementSize();
+  const needData = !typesDontNeedData.includes(viz.type);
+  if (!needData) {
+    return /* @__PURE__ */ jsx("div", {
+      className: "viz-root",
+      ref,
+      children: /* @__PURE__ */ jsx(ErrorBoundary, {
+        children: renderViz(width, height, data, viz)
+      })
+    });
+  }
   const empty = React.useMemo(() => !Array.isArray(data) || data.length === 0, [data]);
   if (loading) {
     return /* @__PURE__ */ jsx("div", {
@@ -1680,7 +3067,7 @@ function _DataFieldSelector({
   data,
   sx
 }, ref) {
-  const options = React.useMemo(() => {
+  const options2 = React.useMemo(() => {
     if (!Array.isArray(data) || data.length === 0) {
       return [];
     }
@@ -1693,7 +3080,7 @@ function _DataFieldSelector({
   return /* @__PURE__ */ jsx(Select, {
     ref,
     label,
-    data: options,
+    data: options2,
     value,
     onChange,
     required,
@@ -1876,7 +3263,7 @@ function _MantineColorSelector({
   }, [value, themeColors]);
   return /* @__PURE__ */ jsxs(Group, {
     position: "apart",
-    spacing: "xs",
+    spacing: 4,
     children: [/* @__PURE__ */ jsx(TextInput, {
       placeholder: "Set any color",
       value: !isThemeColor ? value : "",
@@ -1887,7 +3274,7 @@ function _MantineColorSelector({
       }),
       variant: !isThemeColor ? "default" : "filled",
       sx: {
-        maxWidth: "100%",
+        maxWidth: "46%",
         flexGrow: 1
       }
     }), /* @__PURE__ */ jsx(Text, {
@@ -1906,7 +3293,7 @@ function _MantineColorSelector({
         radius: 4
       }),
       sx: {
-        maxWidth: "100%",
+        maxWidth: "46%",
         flexGrow: 1
       }
     })]
@@ -2005,6 +3392,47 @@ function LineFields({
     })]
   });
 }
+const symbolSizeOptions = Array.from(new Array(9), (_2, i) => ({
+  label: String(i + 1),
+  value: i + 1
+}));
+function ScatterFields({
+  control,
+  index: index2
+}) {
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "row",
+    grow: true,
+    align: "center",
+    children: /* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.symbolSize`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsxs(Group, {
+        direction: "column",
+        noWrap: true,
+        sx: {
+          flexGrow: 1
+        },
+        pb: 16,
+        spacing: 4,
+        children: [/* @__PURE__ */ jsx(Text, {
+          size: "sm",
+          children: "Size"
+        }), /* @__PURE__ */ jsx(Slider, __spreadProps(__spreadValues({
+          min: 1,
+          max: 10,
+          marks: symbolSizeOptions
+        }, field), {
+          sx: {
+            width: "100%"
+          }
+        }))]
+      })
+    })
+  });
+}
 const labelPositions = [{
   label: "off",
   value: ""
@@ -2085,8 +3513,7 @@ function SeriesItemField({
             value: "bar"
           }, {
             label: "Scatter",
-            value: "scatter",
-            disabled: true
+            value: "scatter"
           }, {
             label: "Boxplot",
             value: "boxplot",
@@ -2162,6 +3589,9 @@ function SeriesItemField({
     }), type === "bar" && /* @__PURE__ */ jsx(BarFields, {
       index: index2,
       control
+    }), type === "scatter" && /* @__PURE__ */ jsx(ScatterFields, {
+      index: index2,
+      control
     }), /* @__PURE__ */ jsx(Controller, {
       name: `series.${index2}.label_position`,
       control,
@@ -2222,6 +3652,7 @@ function SeriesField({
     type: "bar",
     name: randomId(),
     showSymbol: false,
+    symbolSize: 5,
     y_axis_data_key: "value",
     yAxisIndex: 0,
     label_position: "top",
@@ -2241,11 +3672,7 @@ function SeriesField({
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,
-    children: [/* @__PURE__ */ jsx(Text, {
-      mt: "xl",
-      mb: 0,
-      children: "Series"
-    }), controlledFields.map((seriesItem, index2) => /* @__PURE__ */ jsx(SeriesItemField, {
+    children: [controlledFields.map((seriesItem, index2) => /* @__PURE__ */ jsx(SeriesItemField, {
       control,
       index: index2,
       remove,
@@ -2399,27 +3826,237 @@ function YAxesField({
   const controlledFields = fields.map((field, index2) => {
     return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
   });
-  const addYAxis = () => append({
+  const addYAxis = () => append({
+    name: "",
+    label_formatter: defaultNumbroFormat
+  });
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    children: [controlledFields.map((field, index2) => /* @__PURE__ */ jsx(YAxisField, {
+      control,
+      index: index2,
+      remove
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: addYAxis,
+        children: "Add a Y Axis"
+      })
+    })]
+  });
+}
+const regressionOptions = [{
+  label: "Linear",
+  value: "linear"
+}, {
+  label: "Exponential",
+  value: "exponential"
+}, {
+  label: "Logarithmic",
+  value: "logarithmic"
+}, {
+  label: "Polynomial",
+  value: "polynomial"
+}];
+function RegressionField({
+  control,
+  regressionItem,
+  index: index2,
+  remove,
+  yAxisOptions,
+  data
+}) {
+  const method = regressionItem.transform.config.method;
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    my: 0,
+    p: "md",
+    pr: 40,
+    sx: {
+      border: "1px solid #eee",
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ jsx(Controller, {
+      name: `regressions.${index2}.name`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+        label: "Name",
+        required: true,
+        sx: {
+          flex: 1
+        }
+      }, field))
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      grow: true,
+      noWrap: true,
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.y_axis_data_key`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+          label: "Value Field",
+          required: true,
+          data,
+          sx: {
+            flex: 1
+          }
+        }, field))
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.plot.yAxisIndex`,
+        control,
+        render: (_a) => {
+          var {
+            field: _b
+          } = _a, _c = _b, {
+            value,
+            onChange
+          } = _c, rest = __objRest(_c, [
+            "value",
+            "onChange"
+          ]);
+          var _a2;
+          return /* @__PURE__ */ jsx(Select, __spreadProps(__spreadValues({
+            label: "Y Axis",
+            data: yAxisOptions,
+            disabled: yAxisOptions.length === 0
+          }, rest), {
+            value: (_a2 = value == null ? void 0 : value.toString()) != null ? _a2 : "",
+            onChange: (value2) => {
+              if (!value2) {
+                onChange(0);
+                return;
+              }
+              onChange(Number(value2));
+            },
+            sx: {
+              flex: 1
+            }
+          }));
+        }
+      })]
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      grow: true,
+      noWrap: true,
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.transform.config.method`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(Select, __spreadValues({
+          label: "Method",
+          data: regressionOptions,
+          sx: {
+            flex: 1
+          }
+        }, field))
+      }), method === "polynomial" && /* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.transform.config.order`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(NumberInput, __spreadValues({
+          label: "Order",
+          sx: {
+            flex: 1
+          }
+        }, field))
+      })]
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      grow: true,
+      spacing: 4,
+      children: [/* @__PURE__ */ jsx(Text, {
+        size: "sm",
+        children: "Color"
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `regressions.${index2}.plot.color`,
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, field))
+      })]
+    }), /* @__PURE__ */ jsx(ActionIcon, {
+      color: "red",
+      variant: "hover",
+      onClick: () => remove(index2),
+      sx: {
+        position: "absolute",
+        top: 15,
+        right: 5
+      },
+      children: /* @__PURE__ */ jsx(Trash, {
+        size: 16
+      })
+    })]
+  }, index2);
+}
+function RegressionsField({
+  control,
+  watch,
+  getValues,
+  data
+}) {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: "regressions"
+  });
+  const watchFieldArray = watch("regressions");
+  const controlledFields = fields.map((field, index2) => {
+    return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
+  });
+  const yAxisOptions = React.useMemo(() => {
+    return getValues().y_axes.map(({
+      name
+    }, index2) => ({
+      label: name,
+      value: index2.toString()
+    }));
+  }, [getValues]);
+  const add = () => append({
+    transform: {
+      type: "ecStat:regression",
+      config: {
+        method: "linear",
+        order: 1,
+        formulaOn: "end"
+      }
+    },
     name: "",
-    label_formatter: defaultNumbroFormat
+    y_axis_data_key: "",
+    plot: {
+      type: "line",
+      yAxisIndex: 0,
+      color: "#666666"
+    }
   });
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,
-    children: [/* @__PURE__ */ jsx(Text, {
-      mt: "xl",
-      mb: 0,
-      children: "Y Axes"
-    }), controlledFields.map((field, index2) => /* @__PURE__ */ jsx(YAxisField, {
+    children: [controlledFields.map((regressionItem, index2) => /* @__PURE__ */ jsx(RegressionField, {
+      regressionItem,
       control,
       index: index2,
-      remove
+      remove,
+      yAxisOptions,
+      data
     })), /* @__PURE__ */ jsx(Group, {
       position: "center",
       mt: "xs",
       children: /* @__PURE__ */ jsx(Button, {
-        onClick: addYAxis,
-        children: "Add a Y Axis"
+        onClick: add,
+        children: "Add a Regression Line"
       })
     })]
   });
@@ -2429,6 +4066,7 @@ function withDefaults(series) {
     type,
     name,
     showSymbol,
+    symbolSize = 5,
     y_axis_data_key = "value",
     yAxisIndex = 0,
     label_position = "top",
@@ -2442,6 +4080,7 @@ function withDefaults(series) {
       type,
       name,
       showSymbol,
+      symbolSize,
       y_axis_data_key,
       yAxisIndex,
       label_position,
@@ -2495,6 +4134,7 @@ function VizCartesianChartPanel({
   } = useForm({
     defaultValues
   });
+  watch(["x_axis_data_key", "x_axis_name"]);
   const values = getValues();
   const changed = React.useMemo(() => {
     return !_.isEqual(values, conf);
@@ -2507,10 +4147,12 @@ function VizCartesianChartPanel({
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: handleSubmit(setConf),
       children: [/* @__PURE__ */ jsxs(Group, {
-        position: "apart",
-        mb: "lg",
+        position: "left",
+        py: "md",
+        pl: "md",
         sx: {
-          position: "relative"
+          borderBottom: "1px solid #eee",
+          background: "#efefef"
         },
         children: [/* @__PURE__ */ jsx(Text, {
           children: "Chart Config"
@@ -2524,41 +4166,68 @@ function VizCartesianChartPanel({
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
-        grow: true,
-        noWrap: true,
-        mb: "lg",
-        children: [/* @__PURE__ */ jsx(Controller, {
-          name: "x_axis_data_key",
-          control,
-          render: ({
-            field
-          }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
-            label: "X Axis Data Field",
-            required: true,
-            data,
-            sx: {
-              flex: 1
-            }
-          }, field))
-        }), /* @__PURE__ */ jsx(Controller, {
-          name: "x_axis_name",
-          control,
-          render: ({
-            field
-          }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-            label: "X Axis Name"
-          }, field))
+      }), /* @__PURE__ */ jsxs(Accordion, {
+        offsetIcon: false,
+        multiple: true,
+        initialState: {
+          0: true,
+          1: true
+        },
+        children: [/* @__PURE__ */ jsx(Accordion.Item, {
+          label: "X Axis",
+          children: /* @__PURE__ */ jsxs(Group, {
+            direction: "row",
+            grow: true,
+            noWrap: true,
+            children: [/* @__PURE__ */ jsx(Controller, {
+              name: "x_axis_data_key",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+                label: "X Axis Data Field",
+                required: true,
+                data,
+                sx: {
+                  flex: 1
+                }
+              }, field))
+            }), /* @__PURE__ */ jsx(Controller, {
+              name: "x_axis_name",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+                label: "X Axis Name",
+                sx: {
+                  flex: 1
+                }
+              }, field))
+            })]
+          })
+        }), /* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Y Axes",
+          children: /* @__PURE__ */ jsx(YAxesField, {
+            control,
+            watch
+          })
+        }), /* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Series",
+          children: /* @__PURE__ */ jsx(SeriesField, {
+            control,
+            watch,
+            getValues,
+            data
+          })
+        }), /* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Regression Lines",
+          children: /* @__PURE__ */ jsx(RegressionsField, {
+            control,
+            watch,
+            getValues,
+            data
+          })
         })]
-      }), /* @__PURE__ */ jsx(YAxesField, {
-        control,
-        watch
-      }), /* @__PURE__ */ jsx(SeriesField, {
-        control,
-        watch,
-        getValues,
-        data
       })]
     })
   });
@@ -2625,55 +4294,147 @@ function VizPiePanel({
     })
   });
 }
-const marks = [{
-  label: "initial",
-  value: 0
+function VizRichTextPanel({
+  conf,
+  setConf
+}) {
+  const defaultValues = React.useMemo(() => {
+    const {
+      content = ""
+    } = conf;
+    return {
+      content
+    };
+  }, [conf]);
+  React.useEffect(() => {
+    const configMalformed = !_.isEqual(conf, defaultValues);
+    if (configMalformed) {
+      setConf(defaultValues);
+    }
+  }, [conf, defaultValues]);
+  const {
+    control,
+    handleSubmit,
+    watch,
+    getValues
+  } = useForm({
+    defaultValues
+  });
+  watch("content");
+  const values = getValues();
+  const changed = React.useMemo(() => {
+    return !_.isEqual(values, conf);
+  }, [values, conf]);
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "column",
+    mt: "md",
+    spacing: "xs",
+    grow: true,
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: handleSubmit(setConf),
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "left",
+        py: "md",
+        pl: "md",
+        sx: {
+          borderBottom: "1px solid #eee",
+          background: "#efefef"
+        },
+        children: [/* @__PURE__ */ jsx(Text, {
+          children: "Content"
+        }), /* @__PURE__ */ jsx(ActionIcon, {
+          type: "submit",
+          mr: 5,
+          variant: "filled",
+          color: "blue",
+          disabled: !changed,
+          children: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
+          })
+        })]
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "content",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(RichTextEditor, __spreadValues({
+          sx: {
+            flex: 1
+          }
+        }, field))
+      })]
+    })
+  });
+}
+function updateSchema(legacyConf) {
+  if ("variables" in legacyConf) {
+    return legacyConf;
+  }
+  const {
+    align,
+    size,
+    weight,
+    color: color2,
+    content: {
+      prefix = "",
+      data_field = "value",
+      formatter = {
+        output: "number",
+        mantissa: 0
+      },
+      postfix = ""
+    } = {}
+  } = legacyConf;
+  return {
+    align,
+    template: `${prefix} \${value} ${postfix}`,
+    variables: [
+      {
+        name: "value",
+        data_field,
+        aggregation: "none",
+        formatter,
+        color: color2,
+        weight,
+        size
+      }
+    ]
+  };
+}
+const options = [{
+  label: "None",
+  value: "none"
 }, {
-  label: "500",
-  value: 25
+  label: "Sum",
+  value: "sum"
 }, {
-  label: "700",
-  value: 50
+  label: "Mean",
+  value: "mean"
 }, {
-  label: "semibold",
-  value: 75
+  label: "Median",
+  value: "median"
 }, {
-  label: "bold",
-  value: 100
+  label: "Max",
+  value: "max"
+}, {
+  label: "Min",
+  value: "min"
 }];
-function _MantineFontWeightSlider({
+function _AggregationSelector({
   label,
   value,
   onChange
 }, ref) {
-  var _a, _b;
-  const [mark, setMark] = React.useState((_b = (_a = marks.find((m2) => m2.label === value)) == null ? void 0 : _a.value) != null ? _b : marks[0].value);
-  React.useEffect(() => {
-    const match = marks.find((s) => s.value === mark);
-    if (match) {
-      onChange(match.label);
-    }
-  }, [mark]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
-    spacing: "xs",
-    mb: "lg",
-    children: [/* @__PURE__ */ jsx(Text, {
-      children: label
-    }), /* @__PURE__ */ jsx(Slider, {
-      label: null,
-      marks,
-      value: mark,
-      onChange: setMark,
-      step: 25,
-      placeholder: "Pick a font size",
-      ref
-    })]
+  return /* @__PURE__ */ jsx(Select, {
+    ref,
+    label,
+    data: options,
+    value,
+    onChange
   });
 }
-const MantineFontWeightSlider = React.forwardRef(_MantineFontWeightSlider);
-function _TextArrayInput({
+const AggregationSelector = React.forwardRef(_AggregationSelector);
+function _ColorArrayInput({
   label,
   value,
   onChange
@@ -2694,6 +4455,10 @@ function _TextArrayInput({
   const submit = () => {
     onChange(values.map((s) => s.toString()));
   };
+  const theme = useMantineTheme();
+  const swatches = React.useMemo(() => {
+    return Object.entries(theme.colors).map(([_color, profile]) => profile[6]);
+  }, [theme]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsxs(Group, {
       position: "left",
@@ -2711,15 +4476,15 @@ function _TextArrayInput({
         })
       })]
     }), /* @__PURE__ */ jsxs(Group, {
-      children: [values.map((v, i) => /* @__PURE__ */ jsx(TextInput, {
+      children: [values.map((v, i) => /* @__PURE__ */ jsx(ColorInput, {
         value: v,
-        onChange: (event) => {
-          const newValue = event.currentTarget.value;
+        onChange: (color2) => {
           setValues((s) => {
-            s.splice(i, 1, newValue);
+            s.splice(i, 1, color2);
             return [...s];
           });
         },
+        swatches,
         rightSection: /* @__PURE__ */ jsx(ActionIcon, {
           onClick: () => del(i),
           color: "red",
@@ -2741,8 +4506,58 @@ function _TextArrayInput({
     })]
   });
 }
-const TextArrayInput = React.forwardRef(_TextArrayInput);
-function _ColorArrayInput({
+const ColorArrayInput = React.forwardRef(_ColorArrayInput);
+const marks = [{
+  label: "initial",
+  value: 0
+}, {
+  label: "500",
+  value: 25
+}, {
+  label: "700",
+  value: 50
+}, {
+  label: "semibold",
+  value: 75
+}, {
+  label: "bold",
+  value: 100
+}];
+function _MantineFontWeightSlider({
+  label,
+  value,
+  onChange
+}, ref) {
+  var _a, _b;
+  const [mark, setMark] = React.useState((_b = (_a = marks.find((m2) => m2.label === value)) == null ? void 0 : _a.value) != null ? _b : marks[0].value);
+  React.useEffect(() => {
+    const match = marks.find((s) => s.value === mark);
+    if (match) {
+      onChange(match.label);
+    }
+  }, [mark]);
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    spacing: 0,
+    mt: "sm",
+    mb: "lg",
+    children: [/* @__PURE__ */ jsx(Text, {
+      size: "sm",
+      children: label
+    }), /* @__PURE__ */ jsx(Slider, {
+      label: null,
+      marks,
+      value: mark,
+      onChange: setMark,
+      step: 25,
+      placeholder: "Pick a font size",
+      ref
+    })]
+  });
+}
+const MantineFontWeightSlider = React.forwardRef(_MantineFontWeightSlider);
+function _TextArrayInput({
   label,
   value,
   onChange
@@ -2763,10 +4578,6 @@ function _ColorArrayInput({
   const submit = () => {
     onChange(values.map((s) => s.toString()));
   };
-  const theme = useMantineTheme();
-  const swatches = React.useMemo(() => {
-    return Object.entries(theme.colors).map(([_color, profile]) => profile[6]);
-  }, [theme]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsxs(Group, {
       position: "left",
@@ -2784,15 +4595,15 @@ function _ColorArrayInput({
         })
       })]
     }), /* @__PURE__ */ jsxs(Group, {
-      children: [values.map((v, i) => /* @__PURE__ */ jsx(ColorInput, {
+      children: [values.map((v, i) => /* @__PURE__ */ jsx(TextInput, {
         value: v,
-        onChange: (color2) => {
+        onChange: (event) => {
+          const newValue = event.currentTarget.value;
           setValues((s) => {
-            s.splice(i, 1, color2);
+            s.splice(i, 1, newValue);
             return [...s];
           });
         },
-        swatches,
         rightSection: /* @__PURE__ */ jsx(ActionIcon, {
           onClick: () => del(i),
           color: "red",
@@ -2814,42 +4625,281 @@ function _ColorArrayInput({
     })]
   });
 }
-const ColorArrayInput = React.forwardRef(_ColorArrayInput);
-function VizStatsPanel({
-  conf,
-  setConf,
+const TextArrayInput = React.forwardRef(_TextArrayInput);
+const TemplateInput = React.forwardRef(function TemplateInput2(_a, ref) {
+  var _b = _a, {
+    value,
+    onChange
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "onChange"
+  ]);
+  return /* @__PURE__ */ jsx(TextInput, __spreadValues({
+    ref,
+    value,
+    onChange
+  }, rest));
+});
+function TemplateVariableField({
+  value,
+  onChange,
   data
 }) {
-  const defaultValues = _.merge({}, {
-    align: "center",
-    size: "100px",
+  const colorType = value.color.type;
+  const handleChange = (path, newValue) => {
+    const v = _.cloneDeep(value);
+    _.set(v, path, newValue);
+    onChange(v);
+  };
+  return /* @__PURE__ */ jsxs(Box, {
+    px: "sm",
+    py: "md",
+    children: [/* @__PURE__ */ jsx(Text, {
+      weight: "bold",
+      pb: 0,
+      children: value.name
+    }), /* @__PURE__ */ jsx(Divider, {
+      my: "xs",
+      label: "Data",
+      labelPosition: "center"
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      grow: true,
+      noWrap: true,
+      children: [/* @__PURE__ */ jsx(TextInput, {
+        label: "Name",
+        required: true,
+        value: value.name,
+        onChange: (e) => handleChange("name", e.currentTarget.value)
+      }), /* @__PURE__ */ jsx(DataFieldSelector, {
+        label: "Data Field",
+        required: true,
+        data,
+        value: value.data_field,
+        onChange: (v) => handleChange("data_field", v)
+      }), /* @__PURE__ */ jsx(AggregationSelector, {
+        label: "Aggregation",
+        value: value.aggregation,
+        onChange: (v) => handleChange("aggregation", v)
+      })]
+    }), /* @__PURE__ */ jsx(NumbroFormatSelector, {
+      value: value.formatter,
+      onChange: (v) => handleChange("formatter", v)
+    }), /* @__PURE__ */ jsx(Divider, {
+      my: "xs",
+      label: "Typography",
+      labelPosition: "center"
+    }), /* @__PURE__ */ jsx(Group, {
+      direction: "column",
+      grow: true,
+      children: /* @__PURE__ */ jsx(TextInput, {
+        label: "Font Size",
+        placeholder: "10px, 1em, 1rem, 100%...",
+        sx: {
+          flex: 1
+        },
+        value: value.size,
+        onChange: (e) => handleChange("size", e.currentTarget.value)
+      })
+    }), /* @__PURE__ */ jsx(Group, {
+      position: "apart",
+      grow: true,
+      sx: {
+        "> *": {
+          flexGrow: 1,
+          maxWidth: "100%"
+        }
+      },
+      children: /* @__PURE__ */ jsx(MantineFontWeightSlider, {
+        label: "Font Weight",
+        value: value.weight,
+        onChange: (v) => handleChange("weight", v)
+      })
+    }), /* @__PURE__ */ jsx(Divider, {
+      my: "xs",
+      label: "Style",
+      labelPosition: "center"
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      grow: true,
+      children: [/* @__PURE__ */ jsx(Select, {
+        label: "Color Type",
+        data: [{
+          label: "Static Color",
+          value: "static"
+        }, {
+          label: "Continuous Color",
+          value: "continuous"
+        }],
+        value: value.color.type,
+        onChange: (v) => handleChange("color.type", v)
+      }), colorType === "static" && /* @__PURE__ */ jsx(MantineColorSelector, {
+        value: value.color.staticColor,
+        onChange: (v) => handleChange("color.staticColor", v)
+      }), colorType === "continuous" && /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(TextArrayInput, {
+          label: "Value Range",
+          value: value.color.valueRange,
+          onChange: (v) => handleChange("color.valueRange", v)
+        }), /* @__PURE__ */ jsx(ColorArrayInput, {
+          label: "Color Range",
+          value: value.color.colorRange,
+          onChange: (v) => handleChange("color.colorRange", v)
+        })]
+      })]
+    })]
+  });
+}
+function VariableField({
+  control,
+  index: index2,
+  remove,
+  data
+}) {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    my: "sm",
+    p: 0,
+    sx: {
+      border: "1px solid #eee",
+      borderTopColor: "#333",
+      borderTopWidth: 2,
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ jsx(Controller, {
+      name: `variables.${index2}`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(TemplateVariableField, __spreadValues({
+        data
+      }, field))
+    }), /* @__PURE__ */ jsx(ActionIcon, {
+      color: "red",
+      variant: "hover",
+      onClick: () => remove(index2),
+      sx: {
+        position: "absolute",
+        top: 15,
+        right: 5
+      },
+      children: /* @__PURE__ */ jsx(Trash, {
+        size: 16
+      })
+    })]
+  }, index2);
+}
+function VariablesField({
+  control,
+  watch,
+  data
+}) {
+  const {
+    fields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: "variables"
+  });
+  const watchFieldArray = watch("variables");
+  const controlledFields = fields.map((field, index2) => {
+    return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
+  });
+  const add = () => append({
+    name: randomId(),
+    size: "20px",
     weight: "bold",
     color: {
       type: "static",
-      staticColor: "red"
+      staticColor: "blue"
     },
-    content: {
-      prefix: "",
+    data_field: "",
+    aggregation: "none",
+    formatter: {
+      output: "number",
+      mantissa: 0
+    }
+  });
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    children: [controlledFields.map((_variableItem, index2) => /* @__PURE__ */ jsx(VariableField, {
+      control,
+      index: index2,
+      remove,
+      data
+    })), /* @__PURE__ */ jsx(Group, {
+      position: "center",
+      mt: "xs",
+      children: /* @__PURE__ */ jsx(Button, {
+        onClick: add,
+        children: "Add a Variable"
+      })
+    })]
+  });
+}
+function getInitialConf() {
+  return {
+    align: "center",
+    template: "The variable ${value} is defined in Variables section",
+    variables: [{
+      name: "value",
+      size: "20px",
+      weight: "bold",
+      color: {
+        type: "static",
+        staticColor: "blue"
+      },
       data_field: "",
+      aggregation: "none",
       formatter: {
         output: "number",
         mantissa: 0
-      },
-      postfix: ""
+      }
+    }]
+  };
+}
+function VizStatsPanel({
+  conf,
+  setConf,
+  data
+}) {
+  const defaultValues = React.useMemo(() => {
+    const {
+      align,
+      template = "",
+      variables = []
+    } = updateSchema(conf);
+    if (!align) {
+      return getInitialConf();
     }
-  }, conf);
+    return {
+      variables,
+      template,
+      align
+    };
+  }, [conf]);
+  React.useEffect(() => {
+    const configMalformed = !_.isEqual(conf, defaultValues);
+    if (configMalformed) {
+      setConf(defaultValues);
+    }
+  }, [conf, defaultValues]);
   const {
     control,
     handleSubmit,
     watch,
-    formState: {
-      isDirty
-    }
+    getValues
   } = useForm({
     defaultValues
   });
-  const colorType = watch("color.type");
-  watch("color.valueField");
+  watch(["variables", "template"]);
+  const values = getValues();
+  const changed = React.useMemo(() => {
+    return !_.isEqual(values, conf);
+  }, [values, conf]);
   return /* @__PURE__ */ jsx(Group, {
     direction: "column",
     mt: "md",
@@ -2874,166 +4924,32 @@ function VizStatsPanel({
           mr: 5,
           variant: "filled",
           color: "blue",
-          disabled: !isDirty,
+          disabled: !changed,
           children: /* @__PURE__ */ jsx(DeviceFloppy, {
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsxs(Accordion, {
-        offsetIcon: false,
-        multiple: true,
-        initialState: {
-          0: true,
-          2: true
-        },
-        children: [/* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Content",
-          children: /* @__PURE__ */ jsxs(Group, {
-            direction: "column",
-            grow: true,
-            children: [/* @__PURE__ */ jsxs(Group, {
-              direction: "row",
-              grow: true,
-              noWrap: true,
-              children: [/* @__PURE__ */ jsx(Controller, {
-                name: "content.prefix",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                  label: "Prefix",
-                  sx: {
-                    flexGrow: 1
-                  }
-                }, field))
-              }), /* @__PURE__ */ jsx(Controller, {
-                name: "content.data_field",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
-                  label: "Data Field",
-                  required: true,
-                  data
-                }, field))
-              }), /* @__PURE__ */ jsx(Controller, {
-                name: "content.postfix",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                  label: "Postfix",
-                  sx: {
-                    flexGrow: 1
-                  }
-                }, field))
-              })]
-            }), /* @__PURE__ */ jsx(Controller, {
-              name: "content.formatter",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(NumbroFormatSelector, __spreadValues({}, field))
-            })]
-          })
-        }), /* @__PURE__ */ jsxs(Accordion.Item, {
-          label: "Font",
-          children: [/* @__PURE__ */ jsx(Group, {
-            direction: "column",
-            grow: true,
-            children: /* @__PURE__ */ jsx(Controller, {
-              name: "size",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                label: "Font Size",
-                placeholder: "10px, 1em, 1rem, 100%...",
-                sx: {
-                  flex: 1
-                }
-              }, field))
-            })
-          }), /* @__PURE__ */ jsx(Group, {
-            position: "apart",
-            grow: true,
-            sx: {
-              "> *": {
-                flexGrow: 1,
-                maxWidth: "100%"
-              }
-            },
-            children: /* @__PURE__ */ jsx(Controller, {
-              name: "weight",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(MantineFontWeightSlider, __spreadValues({
-                label: "Font Weight"
-              }, field))
-            })
-          })]
-        }), /* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Color",
-          children: /* @__PURE__ */ jsxs(Group, {
-            direction: "column",
-            grow: true,
-            children: [/* @__PURE__ */ jsx(Controller, {
-              name: "color.type",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(Select, __spreadValues({
-                label: "Color Type",
-                data: [{
-                  label: "Static Color",
-                  value: "static"
-                }, {
-                  label: "Continuous Color",
-                  value: "continuous"
-                }]
-              }, field))
-            }), colorType === "static" && /* @__PURE__ */ jsx(Controller, {
-              name: "color.staticColor",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, field))
-            }), colorType === "continuous" && /* @__PURE__ */ jsxs(Fragment, {
-              children: [/* @__PURE__ */ jsx(Controller, {
-                name: "color.valueField",
-                control,
-                defaultValue: "",
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-                  placeholder: "Calculate color with this field",
-                  label: "Value Field",
-                  required: true,
-                  sx: {
-                    flex: 1
-                  }
-                }, field))
-              }), /* @__PURE__ */ jsx(Controller, {
-                name: "color.valueRange",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(TextArrayInput, __spreadValues({
-                  label: "Value Range"
-                }, field))
-              }), /* @__PURE__ */ jsx(Controller, {
-                name: "color.colorRange",
-                control,
-                render: ({
-                  field
-                }) => /* @__PURE__ */ jsx(ColorArrayInput, __spreadValues({
-                  label: "Color Range"
-                }, field))
-              })]
-            })]
-          })
-        })]
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: "template",
+        control,
+        render: ({
+          field
+        }) => /* @__PURE__ */ jsx(TemplateInput, __spreadValues({
+          label: "Template",
+          py: "md",
+          sx: {
+            flexGrow: 1
+          }
+        }, field))
+      }), /* @__PURE__ */ jsx(Text, {
+        pb: "sm",
+        pt: "md",
+        size: "sm",
+        children: "Variables"
+      }), /* @__PURE__ */ jsx(VariablesField, {
+        control,
+        watch,
+        data
       })]
     })
   });
@@ -3118,17 +5034,17 @@ function ValueTypeSelector({
     sx
   });
 }
-function VizTablePanel(_e) {
-  var _f = _e, {
-    conf: _g
-  } = _f, _h = _g, {
+function VizTablePanel(_c) {
+  var _d = _c, {
+    conf: _e
+  } = _d, _f = _e, {
     columns
-  } = _h, restConf = __objRest(_h, [
+  } = _f, restConf = __objRest(_f, [
     "columns"
   ]), {
     setConf,
     data
-  } = _f;
+  } = _d;
   const form = useForm$1({
     initialValues: __spreadValues({
       id_field: "id",
@@ -3474,6 +5390,10 @@ const types = [{
   value: "stats",
   label: "Stats",
   Panel: VizStatsPanel
+}, {
+  value: "rich-text",
+  label: "Rich Text",
+  Panel: VizRichTextPanel
 }, {
   value: "table",
   label: "Table",
@@ -4152,7 +6072,7 @@ function SelectOrAddQuery({
       chooseDefault();
     }
   }, [id, queries, chooseDefault]);
-  const options = React.useMemo(() => {
+  const options2 = React.useMemo(() => {
     return queries.map((d) => ({
       value: d.id,
       label: d.id
@@ -4179,7 +6099,7 @@ function SelectOrAddQuery({
       children: [/* @__PURE__ */ jsx(Text, {
         children: "Select a Query"
       }), /* @__PURE__ */ jsx(Select, {
-        data: options,
+        data: options2,
         value: id,
         onChange: setID,
         allowDeselect: false,