Source: v-chart-plugin.js

  1. /** 
  2.  *  @fileOverview Chart component containing all of the generic components required for charts
  3.  *
  4.  *  @author       Brian Greig
  5.  *
  6.  *  @requires     NPM:d3:Vue
  7.  */
  9. /* eslint-env browser */
  10. import barChart from './import/barChart';
  11. import vBarChart from './import/vBarChart';
  12. import lineGraph from './import/lineGraph';
  13. import scatterPlot from './import/scatterPlot';
  14. import pieChart from './import/pieChart';
  15. import areaChart from './import/areaChart';
  16. import bubbleChart from './import/bubbleChart';
  18. const d3 = Object.assign({},
  19.   require('d3-selection'));
  21. /**
  22.  *  Chart is the generic component used for any chart type
  23.  *  @namespace
  24.  */
  25.   
  26. const Chart = {
  27.   install(Vue) {
  28.     Vue.component('v-chart', {
  29.       props: ['chartData'],
  30.       data() {
  31.         return {
  32.           selector: `${this.chartData.selector}-${this.chartData.chartType}`,
  33.         };
  34.       },
  35.       methods: {
  36.         /**
  37.          * Generate a new Chart of type chartType
  38.          * @memberOf Chart
  39.          */
  40.         initalizeChart() {
  41.           const cs = this[this.chartData.chartType]('init');
  42.           this.drawTitle();
  43.           this.generateAxisLabels(cs);
  44.           this.generateLegend(cs);
  45.         },
  46.         /**
  47.          * Redraw the Chart when the data is recycled
  48.          * @memberOf Chart
  49.          */
  50.         refreshChart() {
  51.           this.clearAxis();
  52.           this[this.chartData.chartType]('refresh');
  53.         },
  54.         /**
  55.          * Redraw the Chart when the data is recycled
  56.          * @memberOf Chart
  57.          */
  58.         drawGrid(cs) {
  59.           if (this.chartData.grid && this.chartData.grid.enabled === true) {
  60.             const grid = {
  61.               x: [],
  62.               y: []
  63.             }
  64.             for (let i = this.header; i < (this.height - this.header) * .80; i += this.gridTicks) {
  65.               grid.y.push(i);
  66.             }
  67.             d3.select(`#${this.chartData.selector}`)
  68.             .selectAll('line.gridLine')
  69.             .data(grid.y).enter()
  70.             .append('line')
  71.             .attr('class', 'gridLine')
  72.             .attr('x1', cs.y.axisWidth)
  73.             .attr('x2', this.width)
  74.             .attr('y1', d => d)
  75.             .attr('y2', d => d)
  76.             .style('stroke', '#D3D3D3')
  77.             .style('stroke-width', 1)
  78.           }
  79.         },
  80.         /**
  81.          * Remove x and y axes
  82.          * @memberOf Chart
  83.          */
  84.         clearAxis() {
  85.           d3.select(`#${this.chartData.selector}`).selectAll('.axis').remove();
  86.         },
  87.         /**
  88.          * Remove all content from the SVG
  89.          * @memberOf Chart
  90.          */
  91.         clearCanvas() {
  92.           d3.select(`#${this.chartData.selector}`).selectAll('*').remove();
  93.         },
  94.         /**
  95.          * Appends title and subtitle to the chart
  96.          * @memberOf Chart
  97.          */
  98.         drawTitle() {
  99.           d3.select(`#${this.chartData.selector}`)
  100.             .append('text')
  101.             .attr('font-size', '20')
  102.             .attr('x', this.width / 2)
  103.             .attr('y', this.titleHeight - this.titleHeight * 0.1)
  104.             .style('text-anchor', 'middle')
  105.             .text(this.chartData.title);
  107.           d3.select(`#${this.chartData.selector}`)
  108.             .append('text')
  109.             .attr('font-size', '12')
  110.             .attr('x', this.width / 2)
  111.             .attr('y', this.titleHeight - this.titleHeight * 0.1 + this.subtitleHeight)
  112.             .style('text-anchor', 'middle')
  113.             .text(this.chartData.subtitle);
  114.         },
  115.         /**
  116.          * Adds a tooltip to the SVG
  117.          * @memberOf Chart
  118.          * @param {Object} d dataset
  119.          * @param {Object} e event x and y coordinates
  120.          */
  121.         addTooltip(d, e) {
  122.           d3.select(`#${this.chartData.selector}`)
  123.             .append('rect')
  124.             .attr('x', e.offsetX - 5 - 50)
  125.             .attr('y', e.offsetY - 13 - 25)
  126.             .attr('height', '16px')
  127.             .attr('width', '80px')
  128.             .attr('class', 'tt')
  129.             .attr('fill', 'white');
  131.           d3.select(`#${this.chartData.selector}`)
  132.             .append('text')
  133.             .attr('x', e.offsetX - 50)
  134.             .attr('y', e.offsetY - 25)
  135.             .attr('class', 'tt')
  136.             .attr('font-size', '10px')
  137.             .text(`${d.dim}:${d.metric}`);
  138.         },
  139.         /**
  140.          * Removes all tooltips from the SVG
  141.          * @memberOf Chart
  142.          * @param {Object} d dataset
  143.          */
  144.         removeTooltip() {
  145.           d3.select(`#${this.chartData.selector}`)
  146.             .selectAll('.tt').remove();
  147.         },
  148.         /**
  149.          * Override default values 
  150.          * @param {Object} cs configuration of the coordinate systems
  151.          * @param {Object} overrides the additional values that can be used for an object
  152.          * @returns {Object} updated configuration of coordinate system 
  153.          */
  154.         setOverrides(cs, overrides) {
  155.           overrides = overrides || {};
  156.           const keys = Object.keys(cs);
  157.           for (const key of keys)
  158.             Object.assign(cs[key], overrides[key]);
  159.           return cs;
  160.         },
  161.         /**
  162.          * Generate legend if option -legends- defined as true
  163.          * @memberOf Chart
  164.          * @param {Object} cs configuration of the coordinate system
  165.          */
  166.         generateLegend(cs) {
  167.           if (this.chartData.legends && this.chartData.legends.enabled === true) {
  168.             cs.palette.lineFill = (Array.isArray(cs.palette.lineFill)) ? cs.palette.lineFill : new Array(cs.palette.lineFill); 
  169.             cs.palette.fill = (Array.isArray(cs.palette.fill)) ? cs.palette.fill : new Array(cs.palette.fill); 
  170.             this.metric.forEach( (e, i) => {
  171.               d3.select(`#${this.chartData.selector}`)
  172.               .append('text')
  173.               .attr('font-size', '10')
  174.               .attr('x', this.width - 60)
  175.               .attr('y', this.height * 0.95 - (i * 15))
  176.               .style('text-anchor', 'middle')
  177.               .text(this.metric[i]);
  179.             d3.select(`#${this.chartData.selector}`)
  180.               .append("g")
  181.               .attr("class", "legends")
  182.               .append("rect")
  183.               .attr('x', this.width - 30)
  184.               .attr('y', this.height * 0.95 - (i * 15) - 10)
  185.               .attr("width", 30)
  186.               .attr("height", 10)
  187.               .style("fill", function () {
  188.               const fill = cs.palette.lineFill[i] || cs.palette.fill[i];
  189.                 return fill;
  190.               });
  191.             })
  192.           }
  193.         },
  194.         /**
  195.          * Generate Goal 
  196.          * @memberOf Chart
  197.          * @param {Object} cs configuration of the coordinate system
  198.          */
  200.         generateGoal(cs, shiftAxis, padding) {
  201.           d3.select(`#${this.chartData.selector}`).selectAll('line#goal').remove();
  202.           const x1 = shiftAxis ? cs.y.axisWidth: cs.x.scale(this.goal) + padding;
  203.           const x2 = shiftAxis ? this.width : cs.x.scale(this.goal) + padding;
  204.           const y1 = shiftAxis ? cs.y.scale(this.goal) + padding : this.header;
  205.           const y2 = shiftAxis ? cs.y.scale(this.goal) + padding : this.displayHeight - cs.x.axisHeight;
  206.           
  207.           d3.select(`#${this.chartData.selector}`).append('line')
  208.             .attr('x1', x1)
  209.             .attr('x2', x2)
  210.             .attr('y1', y1)
  211.             .attr('y2', y2)
  212.             .attr('id', 'goal')
  213.             .style('stroke', '#708090')
  214.             .style('stroke-width', 1)
  215.         },
  216.         /**
  217.          * Generate Axis Lables
  218.          * @memberOf Chart
  219.          * @param {Object} cs configuration of the coordinate system 
  220.          */
  221.         generateAxisLabels(cs) {
  222.           let footer = (this.chartData.legends) ? .85 : .95;
  223.           if (!this.chartData.label) return;
  224.           d3.select(`#${this.chartData.selector}`).selectAll('text.axisLabel').remove();
  225.           
  226.           if (cs.x && cs.x.label)
  227.             d3.select(`#${this.chartData.selector}`).append('text')
  228.               .attr('font-size', '10')
  229.               .attr('x', this.width / 2)
  230.               .attr('y', this.height * footer)
  231.               .attr('id', 'xAxisLabel')
  232.               .attr('class', 'axisLabel')
  233.               .style('text-anchor', 'middle')
  234.               .text(cs.x.label)
  236.           if (cs.y && cs.y.label)
  237.             d3.select(`#${this.chartData.selector}`).append('text')
  238.               .attr('font-size', '10')
  239.               .attr('x', 10)
  240.               .attr('y', this.height / 2)
  241.               .attr('id', 'xAxisLabel')
  242.               .attr('class', 'axisLabel')
  243.               .style('text-anchor', 'middle')
  244.               .text(cs.y.label)
  245.               .attr('transform', `rotate(-90,10, ${this.height / 2})`)
  246.         },
  247.         /**
  248.          * get the values of a metric as an array
  249.          * @memberOf Chart
  250.          * @returns {Array} metric values
  251.          */
  252.         metricAsArray(metric) {
  253.           metric = this.chartData.data.map(d => d[metric]);
  254.           return metric; 
  255.         },
  257.         ...((typeof barChart !== 'undefined') && { barChart }),
  258.         ...((typeof vBarChart !== 'undefined') && { vBarChart }),
  259.         ...((typeof scatterPlot !== 'undefined') && { scatterPlot }),
  260.         ...((typeof pieChart !== 'undefined') && { pieChart }),
  261.         ...((typeof areaChart !== 'undefined') && { areaChart }),
  262.         ...((typeof lineGraph !== 'undefined') && { lineGraph }),
  263.         ...((typeof bubbleChart !== 'undefined') && { bubbleChart }),
  264.       },
  265.       computed: {
  266.         /**
  267.          * Dataset getter function
  268.          * @memberOf Chart
  269.          * @returns {Object} normalized dataset
  270.          */
  271.         ds() {
  272.           const ds = { metric: [] };
  273.           ds.metric = (Array.isArray(this.chartData.metric)) ? ds.metric = this.chartData.metric : new Array(this.chartData.metric);
  274.           ds.dim = this.chartData.dim;
  275.           ds.data = this.chartData.data;
  276.           return ds.data.map((d) => {
  277.             const td = { metric: [] };
  278.             if (!ds.metric[0])
  279.               td.metric[0] = d || 0;
  280.             else {
  281.               ds.metric.forEach(function(e, i){
  282.                 td.metric[i] = d[e] || 0;
  283.               })
  284.             }
  285.             td.dim = this.chartData.dim ? d[this.chartData.dim] : null;
  286.             return td;
  287.           });
  288.         },
  289.         /**
  290.          * Dimension getter function
  291.          * @memberOf Chart
  292.          * @returns {string} dim 
  293.          */
  294.         dim() {
  295.           return this.chartData.dim || "undefined";
  296.         },
  297.         /**
  298.          * Goal getter function
  299.          * @memberOf Chart
  300.          * @returns {number} Goal 
  301.          */
  302.         goal() {
  303.           return this.chartData.goal;
  304.         },
  305.         /**
  306.          * Metric getter function
  307.          * @memberOf Chart
  308.          * @returns {array} Metrics 
  309.          */
  310.         metric() {
  311.           const metric = (Array.isArray(this.chartData.metric)) ? this.chartData.metric : new Array(this.chartData.metric);
  312.           return metric;
  313.         },
  314.         /**
  315.          * Height getter function
  316.          * @memberOf Chart
  317.          * @returns {number} Chart Height
  318.          */
  319.         height() {
  320.           return this.chartData.height - 10 || 190;
  321.         },
  322.         /**
  323.          * Width getter function
  324.          * @memberOf Chart
  325.          * @returns {number} Chart width
  326.          */
  327.         width() {
  328.           return this.chartData.width - 10 || 190;
  329.         },
  330.         /**
  331.          * Grid Tick getter function
  332.          * @memberOf Chart
  333.          * @returns {number} gridTicks 
  334.          */
  335.         gridTicks() {
  336.           if (this.chartData.grid && this.chartData.grid.gridTicks != null) {
  337.             return this.chartData.grid.gridTicks;
  338.           }
  339.           return 100;
  340.         },
  341.         /**
  342.          * Get the maxium value for metric
  343.          * @memberOf Chart
  344.          * @returns {number} Max value for metric
  345.          */
  346.         max() {
  347.           let max = 0;
  348.           var results = []; 
  349.           this.ds.forEach(e => {
  350.             results = results.concat([...e.metric]);
  351.           });
  352.           results.forEach((e) => {
  353.             max = max > e ? max : e;
  354.           });
  355.           return max;
  356.         },
  357.         /**
  358.          * Get the maxium value for triplet
  359.          * @memberOf Chart
  360.          * @returns {Array} Max values for triplet
  361.          */
  362.         maxTriplet() {
  363.           const max = {
  364.             v1: 0,
  365.             v2: 0,
  366.             v3: 0
  367.           };
  368.           this.ds.forEach(e => {
  369.             max.v1 = max.v1 > e.metric[0] ? max.v1 : e.metric[0];
  370.             max.v2 = max.v2 > e.metric[1] ? max.v2 : e.metric[1];
  371.             max.v3 = max.v3 > e.metric[2] ? max.v3 : e.metric[2];
  372.           });
  373.           return max;
  374.         },
  375.         /**
  376.          * Get the minimum value for dataset
  377.          * @memberOf Chart
  378.          * @returns {number} Min value for metric
  379.          */
  380.         min() {
  381.           var results = []; 
  382.           this.ds.forEach(e => {
  383.             results = results.concat([...e.metric]);
  384.           });
  385.           return Math.min(...results.map(o => o));
  386.         },
  387.         /**
  388.          * Get the minimum value for triplet
  389.          * @memberOf Chart
  390.          * @returns {Array} Min values for triplet
  391.          */
  392.         minTriplet() {
  393.           var results = {
  394.             v1: [],
  395.             v2: [],
  396.             v3: []
  397.           };
  398.           this.ds.forEach(e => {
  399.             results.v1.push(e.metric[0])
  400.             results.v2.push(e.metric[1])
  401.             results.v3.push(e.metric[2])
  402.           })
  403.           return {
  404.             v1: (Math.min(...results.v1.map(o => o))),
  405.             v2: (Math.min(...results.v2.map(o => o))),
  406.             v3: (Math.min(...results.v3.map(o => o)))
  407.           };
  408.         },
  409.         /**
  410.          * Gets the height of the dispaly area
  411.          * @memberOf Chart
  412.          * @returns {number} Height of the chart display
  413.          */
  414.         displayHeight() {
  415.           if (this.chartData.legends && this.chartData.legends.enabled === true) {
  416.             return this.height * .80;
  417.           } else {
  418.             return this.height * .90;
  419.           }
  420.         },
  421.         /**
  422.          * Gets the height of the title 
  423.          * @memberOf Chart
  424.          * @returns {number} Height of the chart title
  425.          */
  426.         titleHeight() {
  427.           if (this.chartData.title) return this.chartData.textHeight || 25;
  428.           return 0;
  429.         },
  430.         /**
  431.          * Gets the subtitle height
  432.          * @memberOf Chart
  433.          * @returns {number} Height of chart subtitle
  434.          */
  435.         subtitleHeight() {
  436.           if (this.chartData.subtitle) return this.chartData.textHeight * 0.66 || 25 * 0.66;
  437.           return 0;
  438.         },
  439.         /**
  440.          * Gets the combined height of the title and subtitle
  441.          * @memberOf Chart
  442.          * @returns {number} Total header height
  443.          */
  444.         header() {
  445.           return (this.titleHeight + this.subtitleHeight);
  446.         },
  447.       },
  448.       mounted() {
  449.         this.initalizeChart();
  450.       },
  451.       watch: {
  452.         chartData: {
  453.           handler() {
  454.             this.refreshChart();
  455.           },
  456.           deep: true,
  457.         },
  458.       },
  459.       template:
  460.         '<svg :id=\'this.chartData.selector\' x=\'5\' y=\'5\' :height=\'this.height + 20\' :width=\'this.width + 20\'> </svg>',
  461.     });
  462.   },
  463. };
  465. export default Chart;
  467. if (typeof window !== 'undefined' && window.Vue) {
  468.   window.Vue.use(Chart);
  469. }