A drilldown charting widget that drills down into the data based on the 'groupby' attribute
npm install @ez-webcomponents/ez-data-drilldownCopyright (c) 2018 Martin Israelsen
@author Martin Israelsen
$ yarn upgrade --flat
$ yarn add @ez-webcomponents/ez-data-drilldown --flat
Run the es6 version of the Demo (Assuming you installed at SERVER_ROOT using npm)
{SERVER_ROOT}/node_modules/@ez-webcomponents/ez-data-drilldown/build-demo/es6-bundled/demo/index.html
Include ez-data-drilldown-loader.js to use as stand-alone bundled component
or
Import ez-data-drilldown.js directly if using in a build.
ez-data-drilldown demo
title="30,000 Records By Company Revenue"
height="400px"
width="800px"
maxcharts=2
localfilter='[{"field": "company", "action": "multiple", "value": "Spillman2,Nucore2"},
{"field": "startdate", "action": "gt", "value": "2015-12-01"}]'
groupby='[
{"field": "company",
"datasets": [
{"label": "Revenue", "backgroundcolor": "#8e95cd", "bordercolor": "#8e95cd", "data": "sum(revenue)", "type": "bar"}
],
"contextmenu": [{"name": "Wikipedia", "target": "modal", "url":"https://en.wikipedia.org/wiki/{company}"},
{"name": "USU", "target": "_blank", "url":"https://www.usu.edu/"}]},
{"field": "date_trunc(month,startdate)",
"datasets": [
{"label": "Revenue", "backgroundcolor": "#8e95cd", "bordercolor": "#8e95cd", "data": "sum(revenue)", "type": "pie"}
],
"contextmenu": [{"name": "Wikipedia", "target": "modal", "url":"https://en.wikipedia.org/wiki/{company}"},
{"name": "USU2", "target": "modal", "url":"https://www.usu.edu/"}]},
{"field": "division",
"datasets": [
{"label": "Revenue", "backgroundcolor": "#8e95cd", "bordercolor": "#8e95cd", "data": "sum(revenue)", "type": "bar"}
]},
{"field": "age",
"datasets": [
{"label": "Revenue", "backgroundcolor": "#8e95cd", "bordercolor": "#8e95cd", "data": "sum(revenue)", "type": "pie"}
]},
{"field": "gender",
"datasets": [
{"label": "Revenue", "backgroundcolor": "#8e95cd", "bordercolor": "#8e95cd", "data": "sum(revenue)", "type": "line"}
]}
]'>