How to use the britecharts/dist/umd/colors.min.colorSchemas function in britecharts

To help you get started, weโ€™ve selected a few britecharts examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github colapdev / ngx-britecharts / src / components / chart / Chart.component.ts View on Github external
}

      // If the size of some property must be set relative to the container width it must be sent in an
      // object name 'sizeRelativeToContainerWidth' containing the property to set as key and the ratio to the
      // container's width as value.
      if (this.chartConfig.hasOwnProperty('sizeRelativeToContainerWidth')) {
        for (let option in this.chartConfig['sizeRelativeToContainerWidth']) {
          if (this.chart.hasOwnProperty(option)) {
            this.chart[option](containerWidth / this.chartConfig['sizeRelativeToContainerWidth'][option]);
          }
        }
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
            if (this.chartConfig['colors'].hasOwnProperty('reverse') && this.chartConfig['colors']['reverse'] === true) {
              this.chart.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']].reverse());
            } else {
              this.chart.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
            }
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
          this.chart.colorSchema(this.chartConfig['colors']['customSchema']);
        }
      }

      chartContainer.datum(this.data).call(this.chart);

      if (this.chartConfig.hasOwnProperty('click')) {
        if (this.chartType === ChartType.Line || this.chartType === ChartType.StackedArea) {
          this.chart.on('customDataEntryClick', function (e, d, m) {
github colapdev / ngx-britecharts / src / components / chart / Chart.component.ts View on Github external
// container's width as value.
      if (this.chartConfig.hasOwnProperty('sizeRelativeToContainerWidth')) {
        for (let option in this.chartConfig['sizeRelativeToContainerWidth']) {
          if (this.chart.hasOwnProperty(option)) {
            this.chart[option](containerWidth / this.chartConfig['sizeRelativeToContainerWidth'][option]);
          }
        }
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
            if (this.chartConfig['colors'].hasOwnProperty('reverse') && this.chartConfig['colors']['reverse'] === true) {
              this.chart.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']].reverse());
            } else {
              this.chart.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
            }
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
          this.chart.colorSchema(this.chartConfig['colors']['customSchema']);
        }
      }

      chartContainer.datum(this.data).call(this.chart);

      if (this.chartConfig.hasOwnProperty('click')) {
        if (this.chartType === ChartType.Line || this.chartType === ChartType.StackedArea) {
          this.chart.on('customDataEntryClick', function (e, d, m) {
            that.chartConfig['click'](e, d, m);
          });
        } else if (this.chartType === ChartType.ScatterPlot) {
          this.chart.on('customClick', function (e, d, m, s) {
github colapdev / ngx-britecharts / src / components / bar-chart / BarChart.component.ts View on Github external
this.bar[option](this.chartConfig['properties'][option]);
        }
      }

      let showTooltip = false;
      if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
        showTooltip = true;
        this.bar.on('customMouseOver', this.tooltip.show);
        this.bar.on('customMouseMove', this.tooltip.update);
        this.bar.on('customMouseOut', this.tooltip.hide);
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
            this.bar.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
          this.bar.colorSchema(this.chartConfig['colors']['customSchema']);
        }
      }

      barContainer.datum(this.data).call(this.bar);

      if (this.chartConfig.hasOwnProperty('click')) {
        d3Selection.select(this.el).selectAll('.bar-chart .bar').on('click', (ev) => this.chartConfig['click'](ev));
      }

      this.tooltipContainer = d3Selection.select(this.el).select('.bar-chart-container .metadata-group');
      this.tooltipContainer.datum(this.data).call(this.tooltip);

      this.ready.emit(true);
github colapdev / ngx-britecharts / dist / components / donut-chart / DonutChart.component.js View on Github external
DonutChartComponent.prototype.drawChart = function () {
        var _this = this;
        this.donut = donut();
        var donutContainer = d3Selection.select(this.el).select('.donut-chart-container'), containerWidth = donutContainer.node() ? donutContainer.node().getBoundingClientRect().width : false;
        if (containerWidth) {
            this.donut.width(containerWidth);
            for (var option in this.chartConfig['properties']) {
                if (this.donut.hasOwnProperty(option) && option !== 'colorSchema') {
                    this.donut[option](this.chartConfig['properties'][option]);
                }
            }
            if (this.chartConfig.hasOwnProperty('colors')) {
                if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
                    if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
                        this.donut.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
                    }
                }
                else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
                    this.donut.colorSchema(this.chartConfig['colors']['customSchema']);
                }
            }
            donutContainer.datum(this.data).call(this.donut);
            if (this.chartConfig.hasOwnProperty('click')) {
                d3Selection.select(this.el).selectAll('.donut-chart .arc').on('click', function (ev) { return _this.chartConfig['click'](ev); });
            }
            this.ready.emit(true);
        }
    };
    DonutChartComponent.prototype.redrawChart = function () {
github colapdev / ngx-britecharts / src / components / donut-chart / DonutChart.component.ts View on Github external
let donutContainer = d3Selection.select(this.el).select('.donut-chart-container'),
      containerWidth = donutContainer.node() ? donutContainer.node().getBoundingClientRect().width : false;

    if (containerWidth) {
      this.donut.width(containerWidth);

      for (let option in this.chartConfig['properties']) {
        if (this.donut.hasOwnProperty(option) && option !== 'colorSchema') {
          this.donut[option](this.chartConfig['properties'][option]);
        }
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
            this.donut.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
          this.donut.colorSchema(this.chartConfig['colors']['customSchema']);
        }
      }

      donutContainer.datum(this.data).call(this.donut);

      if (this.chartConfig.hasOwnProperty('click')) {
        d3Selection.select(this.el).selectAll('.donut-chart .arc').on('click', (ev) => this.chartConfig['click'](ev));
      }

      this.ready.emit(true);
    }
  }
github colapdev / ngx-britecharts / src / components / line-chart / LineChart.component.ts View on Github external
showTooltip = true;
        this.line.on('customMouseOver', function () {
          that.chartTooltip.show();
        });
        this.line.on('customMouseMove', function (dataPoint, topicColorMap, dataPointXPosition) {
          that.chartTooltip.update(dataPoint, topicColorMap, dataPointXPosition);
        });
        this.line.on('customMouseOut', function () {
          that.chartTooltip.hide();
        });
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
            this.line.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
          this.line.colorSchema(this.chartConfig['colors']['customSchema']);
        }

        if (this.chartConfig['colors'].hasOwnProperty('singleLineGradient')) {
          if (colors.colorGradientsHuman.hasOwnProperty(this.chartConfig['colors']['singleLineGradient'])) {
            this.line.lineGradient(colors.colorGradients[this.chartConfig['colors']['singleLineGradient']]);
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customsingleLineGradient')) {
          this.line.lineGradient(this.chartConfig['colors']['customsingleLineGradient']);
        }
      }

      lineContainer.datum(this.data).call(this.line);
github colapdev / ngx-britecharts / src / components / bar-chart / BarChart.component.ts View on Github external
if (this.bar.hasOwnProperty(option) && option !== 'colorSchema') {
          this.bar[option](this.chartConfig['properties'][option]);
        }
      }

      let showTooltip = false;
      if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
        showTooltip = true;
        this.bar.on('customMouseOver', this.tooltip.show);
        this.bar.on('customMouseMove', this.tooltip.update);
        this.bar.on('customMouseOut', this.tooltip.hide);
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
            this.bar.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
          this.bar.colorSchema(this.chartConfig['colors']['customSchema']);
        }
      }

      barContainer.datum(this.data).call(this.bar);

      if (this.chartConfig.hasOwnProperty('click')) {
        d3Selection.select(this.el).selectAll('.bar-chart .bar').on('click', (ev) => this.chartConfig['click'](ev));
      }

      this.tooltipContainer = d3Selection.select(this.el).select('.bar-chart-container .metadata-group');
      this.tooltipContainer.datum(this.data).call(this.tooltip);
github colapdev / ngx-britecharts / dist / components / stacked-bar-chart / StackedBarChart.component.js View on Github external
if (this.chartConfig.hasOwnProperty('showTooltip') && this.chartConfig['showTooltip'] === true) {
                showTooltip = true;
                var that_1 = this;
                this.stackedBar.on('customMouseOver', function () {
                    that_1.chartTooltip.show();
                });
                this.stackedBar.on('customMouseMove', function (dataPoint, topicColorMap, x, y) {
                    that_1.chartTooltip.update(dataPoint, topicColorMap, x, y);
                });
                this.stackedBar.on('customMouseOut', function () {
                    that_1.chartTooltip.hide();
                });
            }
            if (this.chartConfig.hasOwnProperty('colors')) {
                if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
                    if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
                        this.stackedBar.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
                    }
                }
                else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
                    this.stackedBar.colorSchema(this.chartConfig['colors']['customSchema']);
                }
            }
            stackedBarContainer.datum(this.data).call(this.stackedBar);
            if (this.chartConfig.hasOwnProperty('click')) {
                d3Selection.select(this.el).selectAll('.stacked-bar .bar').on('click', function (ev) { return _this.chartConfig['click'](ev); });
            }
            if (showTooltip) {
                for (var option in this.chartConfig['tooltip']) {
                    if (this.chartTooltip.hasOwnProperty(option)) {
                        this.chartTooltip[option](this.chartConfig['tooltip'][option]);
                    }
github colapdev / ngx-britecharts / src / components / stacked-bar-chart / StackedBarChart.component.ts View on Github external
let that = this;
        this.stackedBar.on('customMouseOver', function () {
          that.chartTooltip.show();
        });
        this.stackedBar.on('customMouseMove', function (dataPoint, topicColorMap, x, y) {
          that.chartTooltip.update(dataPoint, topicColorMap, x, y);
        });
        this.stackedBar.on('customMouseOut', function () {
          that.chartTooltip.hide();
        });
      }

      if (this.chartConfig.hasOwnProperty('colors')) {
        if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
          if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
            this.stackedBar.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
          }
        } else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
          this.stackedBar.colorSchema(this.chartConfig['colors']['customSchema']);
        }
      }

      stackedBarContainer.datum(this.data).call(this.stackedBar);

      if (this.chartConfig.hasOwnProperty('click')) {
        d3Selection.select(this.el).selectAll('.stacked-bar .bar').on('click', (ev) => this.chartConfig['click'](ev));
      }

      if (showTooltip) {
        for (let option in this.chartConfig['tooltip']) {
          if (this.chartTooltip.hasOwnProperty(option)) {
            this.chartTooltip[option](this.chartConfig['tooltip'][option]);
github colapdev / ngx-britecharts / dist / components / stacked-bar-chart / StackedBarChart.component.js View on Github external
showTooltip = true;
                var that_1 = this;
                this.stackedBar.on('customMouseOver', function () {
                    that_1.chartTooltip.show();
                });
                this.stackedBar.on('customMouseMove', function (dataPoint, topicColorMap, x, y) {
                    that_1.chartTooltip.update(dataPoint, topicColorMap, x, y);
                });
                this.stackedBar.on('customMouseOut', function () {
                    that_1.chartTooltip.hide();
                });
            }
            if (this.chartConfig.hasOwnProperty('colors')) {
                if (this.chartConfig['colors'].hasOwnProperty('colorSchema')) {
                    if (colors.colorSchemas.hasOwnProperty(this.chartConfig['colors']['colorSchema'])) {
                        this.stackedBar.colorSchema(colors.colorSchemas[this.chartConfig['colors']['colorSchema']]);
                    }
                }
                else if (this.chartConfig['colors'].hasOwnProperty('customSchema')) {
                    this.stackedBar.colorSchema(this.chartConfig['colors']['customSchema']);
                }
            }
            stackedBarContainer.datum(this.data).call(this.stackedBar);
            if (this.chartConfig.hasOwnProperty('click')) {
                d3Selection.select(this.el).selectAll('.stacked-bar .bar').on('click', function (ev) { return _this.chartConfig['click'](ev); });
            }
            if (showTooltip) {
                for (var option in this.chartConfig['tooltip']) {
                    if (this.chartTooltip.hasOwnProperty(option)) {
                        this.chartTooltip[option](this.chartConfig['tooltip'][option]);
                    }
                }