Documentation
Tutorials
Getting started Advanced Widgets
Github Example Application

Source

widgets/heatCalendar.js

  1. import processStructure from '@devoinc/applications-data-library/structures/heatCalendar';
  2. import downloads from '@devoinc/applications-builder/libs/downloads';
  3. import widgetFactory from '@devoinc/applications-builder/widgetFactory';
  4. import dependencies from '../data/dependencies';
  6. const HeatCalendarWidget = dependencies.require('widgets').HeatCalendarWidget;
  8. const defaultSettings = {
  9.   on: [],
  10.   valueExtent: [Infinity, -Infinity],
  11.   monthLabelColour: 'none',
  12.   title: null,
  13.   weekDayFontColor: 'white',
  14.   legendSelectorColor: 'white',
  15.   weekDaysLabels: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  16.   moveDaysLabels: true,
  17.   mondayFirst: false,
  18.   toBytes: false,
  19.   displayWeekDays: false,
  20.   displayDayLegend: false,
  21.   displayMark: true,
  22.   opacity: 1,
  23.   leftmargin: 12,
  24.   topmargin: 50,
  25.   labermargin: 35,
  26.   displayScale: false,
  27.   scalemargin: 30,
  28.   scaleheight: 15,
  29.   scalesize: [0.25, 0.75],
  30.   dataOperation: 'none',
  31.   drawZero: true,
  32.   minPercentil: null,
  33.   maxPercentil: null,
  34.   discardMethod: 'none',
  35.   displaySelectors: false,
  36. };
  38. /**
  39.  * The heat calendar widget shows a calendar with the days marked in
  40.  * different colors.
  41.  * These colors depend on the amount of data per day and a gradient scale
  42.  * that you can see below.
  43.  * @category Widgets
  44.  * @module HeatCalendar
  45.  * @see [base](module-base.html)
  46.  * @see [collapser](module-collapser.html)
  47.  * @see [dataSearch](module-dataSearch.html)
  48.  * @see [download](module-download.html)
  49.  * @see [info](module-info.html)
  50.  * @see [lifeCycle](module-lifeCycle.html)
  51.  * @see [listeners](module-listeners.html)
  52.  * @see [loading](module-loading.html)
  53.  * @see [menu](module-menu.html)
  54.  * @see [screenshot](module-screenshot.html)
  55.  * @see [zoom](module-zoom.html)
  56.  * @tutorial widgets-heat-calendar
  57.  */
  58. function mixin(self) {
  59.   return {
  60.     /**
  61.      * Set a custum timespamp key.
  62.      * The data should be ordered by this column.
  63.      * @param {string} timestampKey - Column name.
  64.      * @instance
  65.      */
  66.     setTimestampKey: (timestampKey) => {
  67.       self.settings.timestampKey = timestampKey;
  68.     },
  70.     /**
  71.      * Set the value to show.
  72.      * @param {string} value - Column name.
  73.      * @instance
  74.      */
  75.     setValue: (val) => {
  76.       self.settings.valToShow = val;
  77.     },
  79.     /**
  80.      * To develop
  81.      * @param {number[]} valueExtend - Max and min values
  82.      * @instance
  83.      * @ignore
  84.      */
  85.     setValueExtent: (valueExtent) => {
  86.       self.settings.valueExtent = valueExtent;
  87.     },
  89.     /**
  90.      * Attach an event handler function for one event to the widget.
  91.      * @param {string} str - Name of the event to listen.
  92.      * @param {Function} func - Callback JavaScript function.
  93.      * @instance
  94.      */
  95.     setEvent(event, func) {
  96.       if (self.settings.on) {
  97.         self.settings.on = [];
  98.       }
  99.       self.settings.on.push([event, func]);
  100.     },
  102.     /**
  103.      * Set a custom color of the internal lines of the calendar that
  104.      * delimit the days.
  105.      * @param {string} color - Color.
  106.      * @default '#555555'
  107.      * @instance
  108.      */
  109.     setDayLineColor(color) {
  110.       self.settings.dayLineColor = color;
  111.     },
  113.     /**
  114.      * Set a custom color of the internal lines of the calendar that
  115.      * delimit the months.
  116.      * @param {string} color - Color.
  117.      * @default '#eeeeee'
  118.      * @instance
  119.      */
  120.     setMonthLineColor(color) {
  121.       self.settings.monthLineColor = color;
  122.     },
  124.     /**
  125.      * Set the date label color.
  126.      * @param {string} color - Color.
  127.      * @default 'none'
  128.      * @instance
  129.      */
  130.     setMonthLabelColor(color) {
  131.       self.settings.monthLabelColour = color;
  132.     },
  134.     /**
  135.      * Set the custom color for the legend maximun value.
  136.      * @param {string} color - Color.
  137.      * @default '#dddddd'
  138.      * @instance
  139.      */
  140.     setLeyendMaxValColor(color) {
  141.       self.settings.leyendMaxValColor = color;
  142.     },
  144.     /**
  145.      * Set the custom color for the legend minimun value.
  146.      * @param {Object} color - Color.
  147.      * @default '#dddddd'
  148.      * @instance
  149.      */
  150.     setLeyendMinValColor(color) {
  151.       self.settings.leyendMinValColor = color;
  152.     },
  154.     /**
  155.      * Set the color for week days labels.
  156.      * @param {string} color - Color.
  157.      * @default '#ffffff'
  158.      * @instance
  159.      */
  160.     setWeekDayFontColor(color) {
  161.       self.settings.weekDayFontColor = color;
  162.     },
  164.     /**
  165.      * Set the color for the legend selector.
  166.      * @param {string} color - Color
  167.      * @default 'white'
  168.      * @instance
  169.      */
  170.     setLegendSelectorColor(color) {
  171.       self.settings.legendSelectorColor = color;
  172.     },
  174.     /**
  175.      * Set custom labels for days of weeks.
  176.      * @param {string[]} days - Days of week labels.
  177.      * @default ['S', 'M', 'T', 'W', 'T', 'F', 'S']
  178.      * @instance
  179.      */
  180.     setWeekDaysLabels(days) {
  181.       self.settings.weekDaysLabels = days;
  182.     },
  184.     /**
  185.      * Allow to shift the days of the week.
  186.      * @param {boolean} bool
  187.      * @default true
  188.      * @instance
  189.      */
  190.     setMoveDaysLabels: (bool) => (self.settings.moveDaysLabels = bool),
  192.     /**
  193.      * Set Monday as firts day of week.
  194.      * @param {boolean} bool
  195.      * @default false
  196.      * @instance
  197.      */
  198.     setMondayFirst(bool) {
  199.       self.settings.mondayFirst = bool;
  200.     },
  202.     /**
  203.      * Set the values as units of bytes.
  204.      * @param {boolean} bool
  205.      * @default false
  206.      * @instance
  207.      */
  208.     setToBytes: (bool) => (self.settings.toBytes = bool),
  210.     /**
  211.      * Shows the days of the week.
  212.      * @param {boolean} bool
  213.      * @default false
  214.      * @instance
  215.      */
  216.     setDisplayWeekDays(bool) {
  217.       self.settings.displayWeekDays = bool;
  218.     },
  220.     /**
  221.      * Set visible days legend.
  222.      * @param {boolean} bool
  223.      * @default false
  224.      * @instance
  225.      */
  226.     setDisplayDayLegend(bool) {
  227.       self.settings.displayDayLegend = bool;
  228.     },
  230.     /**
  231.      * Set enable display marks.
  232.      * @param {boolean} bool
  233.      * @default true
  234.      * @instance
  235.      */
  236.     setDisplayMark(bool) {
  237.       self.settings.displayMark = bool;
  238.     },
  240.     /**
  241.      * Set the opacity for colors.
  242.      * @param {number} opacity - Opacity. Number between 0 and 1.
  243.      * @default 1
  244.      * @instance
  245.      */
  246.     setOpacity(opacity) {
  247.       self.settings.opacity = opacity;
  248.     },
  250.     /**
  251.      * Set left margin to wrap the chart.
  252.      * @param {number} margin - Margin value.
  253.      * @default 12
  254.      * @instance
  255.      */
  256.     setLeftmargin(margin) {
  257.       self.settings.leftmargin = margin;
  258.     },
  260.     /**
  261.      * Set the top margin of the chart.
  262.      * @param {number} margin - Margin value.
  263.      * @default 50
  264.      * @instance
  265.      */
  266.     setTopmargin(margin) {
  267.       self.settings.topmargin = margin;
  268.     },
  270.     /**
  271.      * Set the margin for the label.
  272.      * @param {number} margin - Margin value.
  273.      * @default 35
  274.      * @instance
  275.      */
  276.     setLabelMargin(margin) {
  277.       self.settings.labermargin = margin;
  278.     },
  280.     /**
  281.      * Set display the scale
  282.      * @param {boolean} bool
  283.      * @default false
  284.      * @instance
  285.      */
  286.     setDisplayScale(bool) {
  287.       self.settings.displayScale = bool;
  288.     },
  290.     /**
  291.      * Set a custom margin for the scale.
  292.      * @param {number} scale - Scale value.
  293.      * @default 15
  294.      * @instance
  295.      */
  296.     setScaleMargin(scale) {
  297.       self.settings.scalemargin = scale;
  298.     },
  300.     /**
  301.      * Set a custom scale height.
  302.      * @param {number} scale - Scale value.
  303.      * @default 15
  304.      * @instance
  305.      */
  306.     setScaleHeight(scale) {
  307.       self.settings.scaleheight = scale;
  308.     },
  310.     /**
  311.      * Set a custom scale size.
  312.      * @param {number[]} scale - Scale size.
  313.      * @default [0.25, 0.75]
  314.      * @instance
  315.      */
  316.     setScaleSize(scale) {
  317.       self.settings.scalesize = scale;
  318.     },
  320.     /**
  321.      * Set a color scale.
  322.      * Currently it has to be an array of colors in d3.
  323.      * The first color is used for tables without data.
  324.      * The rest, to map from the minimum to the maximum value in a linear way.
  325.      * @param {string[]} scale - Colors scale.
  326.      * @default ["#006837", "#1A9863", "#66BD63","#A6D96A", "#D9EF8B", "#FFFFBF","#FEE08B", "#FDAE61", "#F46D43","#D73027", "#A50026"]
  327.      * @instance
  328.      */
  329.     setColorScale(scale) {
  330.       self.settings.colorScale = scale;
  331.     },
  333.     /**
  334.      * Apply an operation for data.
  335.      *
  336.      * Allowed values are:
  337.      * - <b>arctag</b>: Arctangent.
  338.      * - <b>log</b>: Logarithm.
  339.      * - <b>none</b>: No operation
  340.      * @param {string} dataOperation - Operation name.
  341.      * @default 'none'
  342.      * @instance
  343.      */
  344.     setDataOperation(dataOperation) {
  345.       self.settings.dataOperation = dataOperation;
  346.     },
  348.     /**
  349.      * Set the minimum percentile color.
  350.      * @param {string} color - Color.
  351.      * @default #87CEEB
  352.      * @instance
  353.      */
  354.     setMinPercentilColor(color) {
  355.       self.settings.minPercentilColor = color;
  356.     },
  358.     /**
  359.      * Set the maximun percentile color.
  360.      * @param {string} color - Color.
  361.      * @default #BA55D3
  362.      * @instance
  363.      */
  364.     setMaxPercentilColor(color) {
  365.       self.settings.maxPercentilColor = color;
  366.     },
  368.     /**
  369.      * Set the minimun percentile score.
  370.      * @param {number} percentil - Percentil value. Value between 0 and 1.
  371.      * @default null
  372.      * @instance
  373.      */
  374.     setMinPercentil(percentil) {
  375.       self.settings.minPercentil = percentil;
  376.     },
  378.     /**
  379.      * Set the maximun percentile score.
  380.      * @param {number} percentil - Percentil value. Value between 0 and 1.
  381.      * @default null
  382.      * @instance
  383.      */
  384.     setMaxPercentil(percentil) {
  385.       self.settings.maxPercentil = percentil;
  386.     },
  388.     /**
  389.      * Method to discard maximums and minimums.
  390.      *
  391.      * Methods allowed:
  392.      * - <b>stdDev</b>: Standard deviation.
  393.      * - <b>5percent</b>: Percentile 5%-95%.
  394.      * - <b>10percent</b>: Percentile 10%-90%.
  395.      * - <b>20percent</b>: Percentile 20%-20%.
  396.      * - <b>none</b>: None.
  397.      * @param {string} discardMethod - Method name.
  398.      * @default 'none'
  399.      * @instance
  400.      */
  401.     setDiscardMethod(discardMethod) {
  402.       self.settings.discardMethod = discardMethod;
  403.     },
  405.     /**
  406.      * Set visible the selectors.
  407.      * @param {boolean} bool
  408.      * @default false
  409.      * @instance
  410.      */
  411.     setDisplaySelectors(bool) {
  412.       self.settings.displaySelectors = bool;
  413.     },
  415.     // Common
  416.     // -------------------------------------------------------------------------
  418.     /**
  419.      * Download CSV
  420.      * @ignore
  421.      */
  422.     downloadCSV() {
  423.       let s = null;
  424.       let isCorrectData =
  425.         self.widget &&
  426.         self.widget.data &&
  427.         self.widget.data.days &&
  428.         Array.isArray(self.widget.data.days);
  429.       if (isCorrectData) {
  430.         let dayss = self.widget.data.days;
  431.         let valss = self.widget.data.values;
  432.         let nams = self.widget.data.tags[0];
  433.         let totSeries = self.widget.data.days.length;
  434.         let header = '"name","timestamp","value"\r\n';
  435.         let content = '';
  436.         for (var i = 0; i < totSeries; i += 1) {
  437.           let days = dayss[i];
  438.           let vals = valss[i];
  439.           var serieTot = days.length;
  440.           for (var j = 0; j < serieTot; j += 1) {
  441.             content += nams + ',' + days[j] + ',' + vals[j] + ',\r\n';
  442.           }
  443.         }
  444.         s = header + content;
  445.       } else {
  446.         console.error(`No data for download in widget "${self.id}"`);
  447.       }
  448.       if (s) downloads.downloadCSV(s, `${self.id}-data`);
  449.     },
  451.     /**
  452.      * Redraw function
  453.      * @ignore
  454.      */
  455.     redraw() {
  456.       if (self.widget) {
  457.         self.widget.display({ size: true }, 300, $(self.graphic).height());
  458.       }
  459.     },
  461.     /**
  462.      * Resize function
  463.      * @ignore
  464.      */
  465.     resize() {
  466.       this.redraw();
  467.     },
  469.     // Life Cycle
  470.     // -------------------------------------------------------------------------
  472.     /**
  473.      * Render function
  474.      * @param {object} orig - Data for process
  475.      * @ignore
  476.      */
  477.     render: (orig) => {
  478.       if (!self.el) return; // If not have element not render
  479.       let cfg = Object.assign({}, defaultSettings, self.settings);
  480.       let data = processStructure(
  481.         orig,
  482.         cfg.timestampKey,
  483.         cfg.valToShow,
  484.         cfg.valToShow,
  485.         cfg.seriesNames,
  486.         cfg.timestampKey,
  487.         cfg.forceFirstElement,
  488.         cfg.forceLastElement
  489.       );
  491.       if (data) {
  492.         self.widget = new HeatCalendarWidget(cfg);
  493.         self.widget.setData(data);
  494.         self.widget.display({
  495.           force: true,
  496.           data: true,
  497.         });
  498.       } else {
  499.         this.debugError({
  500.           msg: 'NO DATA',
  501.           console: {
  502.             method: 'error',
  503.             msg: 'No data arrive to render function',
  504.           },
  505.         });
  506.       }
  507.     },
  508.   };
  509. }
  511. export default widgetFactory(mixin);