@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTGraph/components/RadialChart/index.js

@@ -0,0 +1,132 @@
+import React, { useMemo } from 'react';
+import * as d3 from 'd3';
+import { func, number, object } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import UTTooltip from '../../../UTTooltip';
+import UTIcon from '../../../UTIcon';
+import { TOOLTIP_SIZE } from '../../constants';
+import styles from './styles.module.scss';
+import { getValueMapByCode } from './utils';
+import { BASE_INNER_RADIUS_RATIO, CORNER_RADIUS, PAD_ANGLE, RING_GAP } from './constants';
+const RadialChart = _ref => {
+  var _configuration$baseIn, _configuration$corner, _configuration$padAng, _configuration$ringGa, _dataset$domain, _tab$configuration;
+  let {
+    tab,
+    width,
+    height,
+    dataset,
+    color,
+    configuration
+  } = _ref;
+  const cX = width / 2;
+  const cY = height / 2;
+  const outerRadius = Math.max(0, Math.min(cX, cY));
+  const baseInnerRadius = outerRadius * ((_configuration$baseIn = configuration === null || configuration === void 0 ? void 0 : configuration.baseInnerRadiusRatio) !== null && _configuration$baseIn !== void 0 ? _configuration$baseIn : BASE_INNER_RADIUS_RATIO);
+  const cornerRadius = (_configuration$corner = configuration === null || configuration === void 0 ? void 0 : configuration.cornerRadius) !== null && _configuration$corner !== void 0 ? _configuration$corner : CORNER_RADIUS;
+  const padAngle = (_configuration$padAng = configuration === null || configuration === void 0 ? void 0 : configuration.padAngle) !== null && _configuration$padAng !== void 0 ? _configuration$padAng : PAD_ANGLE;
+  const ringGap = (_configuration$ringGa = configuration === null || configuration === void 0 ? void 0 : configuration.ringGap) !== null && _configuration$ringGa !== void 0 ? _configuration$ringGa : RING_GAP;
+  const domainEntry = dataset === null || dataset === void 0 || (_dataset$domain = dataset.domain) === null || _dataset$domain === void 0 ? void 0 : _dataset$domain[0];
+  const clusters = useMemo(() => tab.subitems || [], [tab]);
+  const valueByCode = useMemo(() => getValueMapByCode(domainEntry === null || domainEntry === void 0 ? void 0 : domainEntry.concepts), [domainEntry]);
+  const pieInputsByCluster = useMemo(() => clusters.map(cluster => cluster.map(series => {
+    var _valueByCode$get;
+    const code = series.bindings.range;
+    return {
+      code,
+      value: Number((_valueByCode$get = valueByCode.get(code)) !== null && _valueByCode$get !== void 0 ? _valueByCode$get : 0)
+    };
+  })), [clusters, valueByCode]);
+  const pie = useMemo(() => d3.pie().value(d => d.value).sort(null).padAngle(padAngle), [padAngle]);
+  const ringCount = clusters.length || 1;
+  const totalRadialSpace = outerRadius - baseInnerRadius;
+  const ringThickness = Math.max(1, (totalRadialSpace - (ringCount - 1) * ringGap) / ringCount);
+  const innerMostRadius = outerRadius - ringCount * ringThickness - (ringCount - 1) * ringGap;
+  const rings = useMemo(() => pieInputsByCluster.map((pieInput, clusterIndex) => {
+    const visibleInput = pieInput.filter(d => d.value > 0);
+    const ringOuter = outerRadius - clusterIndex * (ringThickness + ringGap);
+    const ringInner = ringOuter - ringThickness;
+    const arcs = pie(visibleInput);
+    const arcGen = d3.arc().innerRadius(ringInner).outerRadius(ringOuter).cornerRadius(cornerRadius);
+    return {
+      clusterIndex,
+      arcs,
+      arcGen
+    };
+  }), [pieInputsByCluster, pie, outerRadius, ringThickness, ringGap, cornerRadius]);
+  const {
+    title,
+    tooltip,
+    value,
+    icon
+  } = ((_tab$configuration = tab.configuration) === null || _tab$configuration === void 0 ? void 0 : _tab$configuration.radialCenter) || {};
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      width,
+      height
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(".concat(cX, ", ").concat(cY, ")")
+  }, rings.map(_ref2 => {
+    let {
+      clusterIndex,
+      arcs,
+      arcGen
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("g", {
+      key: "ring-".concat(clusterIndex)
+    }, arcs.map(arcDatum => {
+      const d = arcGen(arcDatum);
+      const {
+        code
+      } = arcDatum.data;
+      return /*#__PURE__*/React.createElement("path", {
+        key: code,
+        d: d,
+        fill: color(code),
+        stroke: "white",
+        strokeWidth: 1
+      });
+    }));
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, title && /*#__PURE__*/React.createElement(UTLabel, {
+    weight: "medium",
+    variant: "xsmall",
+    colorTheme: "gray",
+    title: title
+  }, title), (value === null || value === void 0 ? void 0 : value.code) && /*#__PURE__*/React.createElement(UTLabel, {
+    weight: "medium",
+    variant: "title2",
+    title: value.code
+  }, value.format ? d3.format(value.format)(valueByCode.get(value.code)) : valueByCode.get(value.code)), tooltip && /*#__PURE__*/React.createElement(UTTooltip, {
+    content: tooltip
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.tooltipIcon
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconInfoCircle",
+    size: TOOLTIP_SIZE
+  }))), icon && /*#__PURE__*/React.createElement(UTIcon, {
+    name: icon,
+    size: Math.max(innerMostRadius - ringGap, 0)
+  })));
+};
+RadialChart.propTypes = {
+  tab: object,
+  width: number,
+  height: number,
+  dataset: object,
+  color: func,
+  configuration: object
+};
+export default RadialChart;

package/dist/esm/components/UTGraph/components/RadialChart/styles.module.scss

@@ -0,0 +1,5 @@
+$TOOLTIP_SIZE: 17px;
+
+.tooltipIcon {
+  height: $TOOLTIP_SIZE;
+}

package/dist/esm/components/UTGraph/components/RadialChart/utils.js

@@ -0,0 +1,6 @@
+export const getValueMapByCode = concepts => {
+  const map = new Map();
+  if (!concepts) return map;
+  concepts.forEach(concept => map.set(concept.code, concept.value));
+  return map;
+};

package/dist/esm/components/UTGraph/constants.js

@@ -0,0 +1,27 @@
+import styles from './styles.module.scss';
+export const LEFT_SIDE = 'left';
+export const RIGHT_SIDE = 'right';
+export const LINE_TYPE = 'line';
+export const BAR_TYPE = 'bar';
+export const POINT_TYPE = 'point';
+export const DOMAIN_CATEGORICAL = 'categorical';
+export const DOMAIN_NUMERICAL = 'numerical';
+export const TOOLTIP_SIZE = 17;
+export const DEFAULT_DOMAIN_TICK_FORMAT = '~s';
+export const DEFAULT_DOMAIN_TICKS = 4;
+export const DEFAULT_RANGE_TICK_FORMAT = '~s';
+export const DEFAULT_RANGE_TICKS = 4;
+export const DEFAULT_CARTESIAN_PLANE_MARGINS = {
+  top: 24,
+  right: 24,
+  bottom: 24,
+  left: 24
+};
+export const MIN_BAR_WIDTH = 4;
+export const MAX_BAR_WIDTH = 20;
+export const DEFAULT_BAR_WIDTH = 10;
+export const LEGEND_TYPE_STYLES = {
+  [POINT_TYPE]: styles.legendPoint,
+  [BAR_TYPE]: styles.legendBar,
+  [LINE_TYPE]: styles.legendLine
+};

package/dist/esm/components/UTGraph/index.js

@@ -0,0 +1,225 @@
+import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import * as d3 from 'd3';
+import { array, object, objectOf, string } from 'prop-types';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+import WithTheme from '../WithTheme';
+import UTLabel from '../UTLabel';
+import UTButtonGroup from '../UTButtonGroup';
+import UTIcon from '../UTIcon';
+import UTTooltip from '../UTTooltip';
+import Bars from './components/Bars';
+import Lines from './components/Lines';
+import CartesianPlane from './components/CartesianPlane';
+import RadialChart from './components/RadialChart';
+import { applyHeadroom, computeCrossAxisDomainForSide, computeMainAxisExtentNumerical, detectAxisSides } from './utils';
+import { DEFAULT_CARTESIAN_PLANE_MARGINS, DEFAULT_DOMAIN_TICK_FORMAT, DEFAULT_DOMAIN_TICKS, DEFAULT_RANGE_TICK_FORMAT, DEFAULT_RANGE_TICKS, DOMAIN_NUMERICAL, LEFT_SIDE, LEGEND_TYPE_STYLES, RIGHT_SIDE, TOOLTIP_SIZE } from './constants';
+import ownStyles from './styles.module.scss';
+import { retrieveStyle } from './theme';
+import Points from './components/Points';
+const UTGraph = _ref => {
+  var _meta$configuration, _meta$configuration2;
+  let {
+    meta,
+    datasets,
+    classNames,
+    classes: theme
+  } = _ref;
+  const {
+    margin: cartesianPlaneMargin,
+    rangeLeftTickFormat,
+    rangeLeftTicks,
+    rangeRightTickFormat,
+    rangeRightTicks,
+    domainTickFormat,
+    domainTicks
+  } = ((_meta$configuration = meta.configuration) === null || _meta$configuration === void 0 ? void 0 : _meta$configuration.cartesianPlane) || {};
+  const styles = useMemo(() => mergeMultipleClassNames(ownStyles, theme, classNames), [ownStyles, theme, classNames]);
+  const [selectedTab, setSelectedTab] = useState(meta.chart_tabs[0]);
+  const tabOptions = useMemo(() => {
+    var _meta$chart_tabs;
+    return meta.chart_tabs ? (_meta$chart_tabs = meta.chart_tabs) === null || _meta$chart_tabs === void 0 ? void 0 : _meta$chart_tabs.map(tab => ({
+      Icon: tab.icon,
+      id: tab.code,
+      onClick: () => setSelectedTab(tab),
+      value: tab.code
+    })) : [];
+  }, [meta.chart_tabs]);
+  const dataset = useMemo(() => datasets.find(ds => ds.code === selectedTab.code), [datasets, selectedTab]);
+  const mainAxisDomain = useMemo(() => {
+    var _selectedTab$domain;
+    if (!dataset) return [];
+    if (((_selectedTab$domain = selectedTab.domain) === null || _selectedTab$domain === void 0 ? void 0 : _selectedTab$domain.binding) === DOMAIN_NUMERICAL) return applyHeadroom(computeMainAxisExtentNumerical(selectedTab, dataset), {
+      padBottom: 0.08
+    });
+    return dataset.domain.map(item => item.domain_value);
+  }, [dataset, selectedTab]);
+  const crossAxisLeftDomain = useMemo(() => applyHeadroom(computeCrossAxisDomainForSide(selectedTab, dataset, LEFT_SIDE)), [selectedTab, dataset]);
+  const crossAxisRightDomain = useMemo(() => applyHeadroom(computeCrossAxisDomainForSide(selectedTab, dataset, RIGHT_SIDE)), [selectedTab, dataset]);
+  const {
+    hasLeft,
+    hasRight
+  } = detectAxisSides(selectedTab);
+
+  // TBD: colors should be retrieved from the report's meta
+  const colorDomain = useMemo(() => {
+    const seriesCodes = selectedTab.subitems.flatMap(cluster => cluster.map(series => series.bindings.range).filter(Boolean));
+    const colorCodesUsed = new Set(selectedTab.subitems.flatMap(cluster => cluster.map(s => {
+      var _s$bindings;
+      return (_s$bindings = s.bindings) === null || _s$bindings === void 0 ? void 0 : _s$bindings.color;
+    }).filter(Boolean)));
+    const colorValues = [];
+    if (dataset && colorCodesUsed.size > 0) {
+      const codes = Array.from(colorCodesUsed);
+      dataset.domain.forEach(record => {
+        const dict = Object.fromEntries(record.concepts.map(d => [d.code, d.value]));
+        codes.forEach(cc => {
+          const v = dict[cc];
+          if (v != null && !colorValues.includes(v)) colorValues.push(v);
+        });
+      });
+    }
+    return Array.from(new Set([...seriesCodes, ...colorValues]));
+  }, [selectedTab, dataset]);
+  const color = useMemo(() => d3.scaleOrdinal(colorDomain, d3.schemeTableau10), [colorDomain]);
+  const legendItems = useMemo(() => {
+    const seen = new Set();
+    return selectedTab.subitems.flat().filter(series => {
+      const code = series.bindings.range;
+      if (!code || seen.has(code)) return false;
+      seen.add(code);
+      return true;
+    }).map(series => ({
+      code: series.bindings.range,
+      name: series.name,
+      type: series.type
+    }));
+  }, [selectedTab]);
+  const containerRef = useRef(null);
+  const planeWrapperRef = useRef(null);
+  const [containerSize, setContainerSize] = useState({
+    width: 0,
+    height: 0
+  });
+  useEffect(() => {
+    if (!containerRef.current || !planeWrapperRef.current) return;
+    const resizeObserver = new ResizeObserver(entries => {
+      if (!entries[0]) return;
+      const {
+        width,
+        height
+      } = entries[0].contentRect;
+      setContainerSize(prev => {
+        const next = {
+          width,
+          height: Math.max(height, 0)
+        };
+        if (Math.abs(prev.width - next.width) < 1 && Math.abs(prev.height - next.height) < 1) return prev;
+        return next;
+      });
+    });
+    resizeObserver.observe(planeWrapperRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "subtitle1",
+    weight: "medium",
+    title: selectedTab.name
+  }, selectedTab.name), (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.tooltip) && /*#__PURE__*/React.createElement(UTTooltip, {
+    content: selectedTab.tooltip
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.tooltipIcon
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconInfoCircle",
+    size: TOOLTIP_SIZE
+  })))), tabOptions.length > 1 && /*#__PURE__*/React.createElement(UTButtonGroup, {
+    actions: tabOptions,
+    selected: selectedTab.code
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.planeWrapper,
+    ref: planeWrapperRef
+  }, meta.chart_layout === 'cartesian' ? /*#__PURE__*/React.createElement(CartesianPlane, {
+    crossAxisLeftDomain: crossAxisLeftDomain,
+    crossAxisRightDomain: crossAxisRightDomain,
+    crossAxisLeftTickFormat: rangeLeftTickFormat || DEFAULT_RANGE_TICK_FORMAT,
+    crossAxisLeftTicks: rangeLeftTicks || DEFAULT_RANGE_TICKS,
+    crossAxisRightTickFormat: rangeRightTickFormat || DEFAULT_RANGE_TICK_FORMAT,
+    crossAxisRightTicks: rangeRightTicks || DEFAULT_RANGE_TICKS,
+    height: containerSize.height,
+    mainAxisDomain: mainAxisDomain,
+    mainAxisTickFormat: domainTickFormat || DEFAULT_DOMAIN_TICK_FORMAT,
+    mainAxisTicks: domainTicks || DEFAULT_DOMAIN_TICKS,
+    margin: cartesianPlaneMargin || DEFAULT_CARTESIAN_PLANE_MARGINS,
+    width: containerSize.width,
+    hasLeft: hasLeft,
+    hasRight: hasRight,
+    tab: selectedTab
+  }, _ref2 => {
+    let {
+      mainAxis,
+      crossAxisLeft,
+      crossAxisRight
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Bars, {
+      crossAxisLeft: crossAxisLeft,
+      crossAxisRight: crossAxisRight,
+      dataset: dataset,
+      mainAxis: mainAxis,
+      mainAxisDomain: mainAxisDomain,
+      tab: selectedTab,
+      color: color
+    }), /*#__PURE__*/React.createElement(Lines, {
+      crossAxisLeft: crossAxisLeft,
+      crossAxisRight: crossAxisRight,
+      dataset: dataset,
+      mainAxis: mainAxis,
+      mainAxisDomain: mainAxisDomain,
+      tab: selectedTab,
+      color: color
+    }), /*#__PURE__*/React.createElement(Points, {
+      crossAxisLeft: crossAxisLeft,
+      crossAxisRight: crossAxisRight,
+      dataset: dataset,
+      mainAxis: mainAxis,
+      mainAxisDomain: mainAxisDomain,
+      tab: selectedTab,
+      color: color
+    }));
+  }) : meta.chart_layout === 'radial' ? /*#__PURE__*/React.createElement(RadialChart, {
+    tab: selectedTab,
+    width: containerSize.width,
+    height: containerSize.height,
+    dataset: dataset,
+    color: color,
+    configuration: meta === null || meta === void 0 || (_meta$configuration2 = meta.configuration) === null || _meta$configuration2 === void 0 ? void 0 : _meta$configuration2.radialChart
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: styles.legends
+  }, legendItems.map(item => /*#__PURE__*/React.createElement("div", {
+    key: item.code,
+    className: styles.legendItem,
+    title: item.name
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: color(item.code)
+    },
+    className: LEGEND_TYPE_STYLES[item.type]
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "xsmall",
+    className: styles.legendLabel
+  }, item.name)))));
+};
+UTGraph.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  meta: object,
+  datasets: array
+};
+export default WithTheme(retrieveStyle)(UTGraph);

package/dist/esm/components/UTGraph/report.schema.json

@@ -0,0 +1,277 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://utgraph.dev/schemas/report.schema.json",
+  "title": "UTGraph",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["meta", "datasets"],
+  "properties": {
+    "meta": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["id", "code", "chart_layout", "chart_tabs"],
+      "properties": {
+        "id": { "type": "number", "description": "identifier for this graph" },
+        "code": { "type": "string", "description": "code for this graph" },
+        "chart_layout": { "type": "string", "enum": ["cartesian", "radial"], "default": "cartesian" },
+        "chart_tabs": {
+          "type": "array",
+          "minItems": 1,
+          "items": {
+            "type": "object",
+            "additionalProperties": false,
+            "required": ["id", "code", "order", "name", "icon", "orientation", "subitems"],
+            "properties": {
+              "id": { "type": "number", "description": "identifier for this tab" },
+              "code": { "type": "string", "description": "must match a dataset code from datasets" },
+              "order": { "type": "number", "description": "order of this tab" },
+              "name": { "type": "string" },
+              "tooltip": { "type": "string" },
+              "icon": { "type": "string" },
+              "orientation": {
+                "type": "string",
+                "enum": ["horizontal", "vertical"],
+                "default": "vertical"
+              },
+              "domain": {
+                "type": "object",
+                "additionalProperties": false,
+                "required": ["binding"],
+                "properties": {
+                  "binding": {
+                    "type": "string",
+                    "enum": ["categorical", "numerical"],
+                    "default": "categorical",
+                    "description": "CARTESIAN ONLY: defines how to bind the main axis to the dataset.\n\n\"categorical\" uses each dataset.domain[i].domain_value to render a category.\n\n\"numerical\" renders a continuous axis using the value defined in subitems[].bindings.domain to set a domain."
+                  }
+                }
+              },
+              "ranges": {
+                "type": "object",
+                "additionalProperties": false,
+                "description": "CARTESIAN ONLY: defines the configuration fot both cross axes.",
+                "properties": {
+                  "left": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "label": { "type": "string" },
+                      "unit": { "type": "string" },
+                      "min": { "type": "number" },
+                      "max": { "type": "number" }
+                    }
+                  },
+                  "right": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "label": { "type": "string" },
+                      "unit": { "type": "string" },
+                      "min": { "type": "number" },
+                      "max": { "type": "number" }
+                    }
+                  }
+                }
+              },
+              "subitems": {
+                "type": "array",
+                "minItems": 1,
+                "description": "First dimension: clusters (side-by-side). Second dimension: series (stacked)",
+                "items": {
+                  "type": "array",
+                  "minItems": 1,
+                  "items": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "required": ["name", "bindings"],
+                    "properties": {
+                      "name": { "type": "string" },
+                      "type": {
+                        "type": "string",
+                        "enum": ["bar", "line", "point"],
+                        "description": "CARTESIAN ONLY: defines the type of the element to render."
+                      },
+                      "range": {
+                        "type": "string",
+                        "enum": ["left", "right"],
+                        "default": "left",
+                        "description": "CARTESIAN ONLY: defines which cross axis to use."
+                      },
+                      "bindings": {
+                        "type": "object",
+                        "description": "defines how to bind each subitem attribute to the dataset. ",
+                        "additionalProperties": false,
+                        "properties": {
+                          "range": {
+                            "type": "string",
+                            "description": "REQUIRED for all series. Defines the placement of the element in the cross axis. Must match a dataset subitem code"
+                          },
+                          "domain": {
+                            "type": "string",
+                            "description": "CARTESIAN ONLY: REQUIRED, only for numerical binding. Defines the placement of the element in the main axis. Must match a dataset subitem code"
+                          },
+                          "size": {
+                            "type": "string",
+                            "description": "CARTESIAN ONLY: OPTIONAL. Defines the size of the element. Points use it for its radius (both categorical and numerical binding). In numerical binding bars use it for its width. Must match a dataset subitem code"
+                          },
+                          "color": {
+                            "type": "string",
+                            "description": "CARTESIAN ONLY: OPTIONAL. Defines the dataset code whose values determine the color grouping. Must match a dataset subitem code"
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              "configuration": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "radialCenter": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "icon": { "type": "string" },
+                      "title": { "type": "string" },
+                      "tooltip": { "type": "string" },
+                      "value": {
+                        "type": "object",
+                        "additionalProperties": false,
+                        "properties": {
+                          "code": { "type": "string" },
+                          "format": { "type": "string" }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        "configuration": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "cartesianPlane": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "rangeLeftTicks": {
+                  "type": "number",
+                  "default": 4,
+                  "description": "defines the number of ticks in the left cross axis"
+                },
+                "rangeRightTicks": {
+                  "type": "number",
+                  "default": 4,
+                  "description": "defines the number of ticks in the right cross axis"
+                },
+                "rangeLeftTickFormat": {
+                  "type": "string",
+                  "default": "~s",
+                  "description": "defines the tick format in the left cross axis"
+                },
+                "rangeRightTickFormat": {
+                  "type": "string",
+                  "default": "~s",
+                  "description": "defines the tick format in the right cross axis"
+                },
+                "margin": {
+                  "type": "object",
+                  "additionalProperties": false,
+                  "properties": {
+                    "top": { "type": "number", "default": 24 },
+                    "right": { "type": "number", "default": 24 },
+                    "bottom": { "type": "number", "default": 24 },
+                    "left": { "type": "number", "default": 24 }
+                  }
+                },
+                "mainAxisTicks": {
+                  "type": "number",
+                  "default": 4,
+                  "description": "defines the number of ticks in the main axis (for numerical binding)"
+                },
+                "mainAxisTickFormat": {
+                  "type": "string",
+                  "default": "~s",
+                  "description": "defines the tick format for the main axis"
+                }
+              }
+            },
+            "radialChart": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "baseInnerRadiusRatio": {
+                  "type": "number",
+                  "default": 0.45,
+                  "description": "defines the ratio of the inner radius of the radial chart"
+                },
+                "cornerRadius": {
+                  "type": "number",
+                  "default": 4,
+                  "description": "defines the corner radius of the radial chart"
+                },
+                "padAngle": {
+                  "type": "number",
+                  "default": 0.01,
+                  "description": "defines the pad angle of the radial chart"
+                },
+                "ringGap": {
+                  "type": "number",
+                  "default": 3,
+                  "description": "defines the gap between rings of the radial chart"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "datasets": {
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["code", "domain"],
+        "properties": {
+          "code": { "type": "string", "description": "must match a tab code from meta" },
+          "domain": {
+            "type": "array",
+            "minItems": 1,
+            "items": {
+              "type": "object",
+              "additionalProperties": false,
+              "required": ["concepts"],
+              "properties": {
+                "domain_value": {
+                  "type": "string",
+                  "description": "CARTESIAN ONLY: label to display below this category's main axis"
+                },
+                "concepts": {
+                  "type": "array",
+                  "minItems": 1,
+                  "items": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "required": ["code", "value"],
+                    "properties": {
+                      "code": {
+                        "type": "string",
+                        "description": "must match a series code from meta"
+                      },
+                      "value": { "type": ["number", "string"] }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}