@rfprodz/client-d3-charts 1.0.0

package/fesm2020/rfprodz-client-d3-charts.mjs

@@ -0,0 +1,1855 @@
+import * as i2 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Input, ViewChild, NgModule } from '@angular/core';
+import * as d3 from 'd3';
+import * as i1 from '@angular/cdk/layout';
+import { Breakpoints } from '@angular/cdk/layout';
+import { map, switchMap, timer, first } from 'rxjs';
+
+/**
+ * Generates a configuration object based on a defaut configuration and an options object.
+ * @param config the default object with all properties
+ * @param options the input object
+ * @param result the output object
+ */
+const generateConfiguration = (config, options, result) => {
+    const defaultConfiguration = config;
+    if (typeof options === 'undefined') {
+        return config;
+    }
+    const keys = Object.keys(defaultConfiguration);
+    for (const key of keys) {
+        const defaultValue = defaultConfiguration[key];
+        const value = options[key];
+        const typedKey = key;
+        if (typeof defaultValue === 'string' || typeof defaultValue === 'number' || typeof defaultValue === 'boolean') {
+            result[typedKey] = typeof value !== 'undefined' ? value : defaultValue;
+        }
+        else if (defaultValue instanceof Function) {
+            result[typedKey] = defaultValue;
+        }
+        else if (typeof defaultValue === 'object' && defaultValue !== null) {
+            const nestedDefaultObject = defaultValue;
+            const nestedObject = value;
+            result[typedKey] = generateConfiguration(nestedDefaultObject, nestedObject, {});
+        }
+    }
+    return result;
+};
+
+/**
+ * The bar chart default configuration.
+ */
+const defaultBarChartConfig = Object.freeze({
+    chartTitle: '',
+    width: 350,
+    height: 350,
+    margin: {
+        top: 70,
+        right: 50,
+        bottom: 50,
+        left: 50,
+    },
+    transitionDuration: 400,
+    xAxisPadding: 0.4,
+    xAxisTitle: '',
+    yAxisTitle: '',
+    yAxisTicks: 10,
+    displayAxisLabels: true,
+    labelTextWrapWidth: 60,
+    color: d3.scaleOrdinal(d3.schemeCategory10),
+});
+/**
+ * Creates a container for the bar chart.
+ * @param container the chart container
+ * @param config the chart configuration
+ * @returns the object with the svg element and the g element
+ */
+const createContainer$4 = (container, config) => {
+    const id = container.nativeElement.id ?? 'bar-0';
+    d3.select(`#${id}`).select('svg').remove();
+    const svg = d3
+        .select(`#${id}`)
+        .append('svg')
+        .attr('width', config.width + config.margin.left + config.margin.right)
+        .attr('height', config.height + config.margin.top + config.margin.bottom)
+        .attr('class', id);
+    const g = svg.append('g').attr('transform', `translate(${config.margin.left},${config.margin.top / 2})`);
+    return { svg, g };
+};
+/**
+ * Wraps the bar chart axis labels text.
+ * @param svgText the svg text elements
+ * @param width the chart axis label width
+ */
+const wrapSvgText$2 = (svgText, width) => {
+    svgText.each(function () {
+        const text = d3.select(this);
+        const words = text.text().split(/\s+/).reverse();
+        let line = [];
+        let lineNumber = 0;
+        const lineHeight = 1.4;
+        const y = text.attr('y');
+        const x = text.attr('x');
+        const dy = parseFloat(text.attr('dy') ?? 0);
+        let tspan = text.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', `${dy}em`); // axis label
+        let word = words.pop();
+        while (typeof word !== 'undefined') {
+            line.push(word ?? '');
+            tspan.text(line.join(' '));
+            if ((tspan.node()?.getComputedTextLength() ?? 0) > width) {
+                line.pop();
+                tspan.text(line.join(' '));
+                line = [word ?? ''];
+                lineNumber += 1;
+                tspan = text
+                    .append('tspan')
+                    .attr('x', 0)
+                    .attr('y', y)
+                    .attr('dy', `${lineNumber * lineHeight + dy}em`)
+                    .text(word ?? '');
+            }
+            word = words.pop();
+        }
+    });
+};
+/**
+ * Creates the legend.
+ * @param g the svg g element
+ * @param config the chart configuration
+ */
+const createLegend$2 = (g, config) => {
+    if (config.displayAxisLabels && config.xAxisTitle !== '') {
+        g.append('g')
+            .attr('transform', `translate(0, ${config.height + config.margin.bottom})`)
+            .append('text')
+            .style('font-size', '12px')
+            .attr('class', 'legend')
+            .attr('dx', '1.5em')
+            .attr('dy', '1em')
+            .text(`x - ${config.xAxisTitle}`);
+    }
+    if (config.displayAxisLabels && config.yAxisTitle !== '') {
+        g.append('g')
+            .attr('transform', `translate(0, ${config.height + config.margin.bottom})`)
+            .append('text')
+            .style('font-size', '12px')
+            .attr('class', 'legend')
+            .attr('dx', '1.5em')
+            .attr('dy', '2.5em')
+            .text(`y - ${config.yAxisTitle}`);
+    }
+    if (config.chartTitle !== '') {
+        g.append('g')
+            .attr('transform', `translate(0, 0)`)
+            .append('text')
+            .style('font-size', '12px')
+            .attr('class', 'legend')
+            .attr('dx', '1.5em')
+            .attr('dy', '-2em')
+            .text(config.chartTitle);
+    }
+};
+/**
+ * Creates the x axis.
+ * @param g the svg g element
+ * @param x the x axis scale
+ * @param config the chart configuration
+ */
+const createAxisX$1 = (g, x, config) => {
+    const xLabels = g.append('g').attr('transform', `translate(0, ${config.height})`).call(d3.axisBottom(x)).append('text');
+    g.selectAll('text').call(wrapSvgText$2, config.labelTextWrapWidth);
+    if (config.displayAxisLabels) {
+        xLabels.attr('transform', `translate(${config.width}, 0)`).attr('class', 'legend').attr('dx', '1.5em').attr('dy', '0.7em').text('x');
+    }
+};
+/**
+ * Creates the y axis.
+ * @param g the svg g element
+ * @param y the y axis scale
+ * @param config the chart configuration
+ */
+const createAxisY$1 = (g, y, config) => {
+    const yLabels = g
+        .append('g')
+        .call(d3
+        .axisLeft(y)
+        .tickFormat(function (d) {
+        return `${d}`;
+    })
+        .ticks(config.yAxisTicks))
+        .append('text');
+    if (config.displayAxisLabels) {
+        yLabels.attr('dy', '-1.5em').attr('class', 'legend').text('y');
+    }
+};
+/**
+ * The mouse over event handler.
+ * @param self an svg rect element
+ * @param d the chart data node
+ * @param g the svg g element
+ * @param x the x axis scale
+ * @param y the y axis scale
+ * @param config the chart configuration
+ */
+const onMouseOver$1 = (self, d, g, x, y, config) => {
+    const widthModifier = 5;
+    d3.select(self)
+        .transition()
+        .duration(config.transitionDuration)
+        .attr('width', x.bandwidth() + widthModifier)
+        .attr('y', function () {
+        const modifier = 10;
+        return y(d.value) - modifier;
+    })
+        .attr('height', function () {
+        const modifier = 10;
+        return config.height - y(d.value) + modifier;
+    });
+    g.append('text')
+        .attr('class', 'val')
+        .style('font-size', '11px')
+        .attr('x', () => x(d.title) ?? '')
+        .attr('y', function () {
+        const modifier = 15;
+        return y(d.value) - modifier;
+    })
+        .text(() => d.value);
+};
+/**
+ * The mouse out event handler.
+ * @param self an svg rect element
+ * @param d the chart data node
+ * @param x the x axis scale
+ * @param y the y axis scale
+ * @param config the chart configuration
+ */
+const onMouseOut$1 = (self, d, x, y, config) => {
+    d3.select(self).attr('class', 'bar');
+    d3.select(self)
+        .transition()
+        .duration(config.transitionDuration)
+        .attr('width', x.bandwidth())
+        .attr('y', () => y(d.value) ?? 0)
+        .attr('height', () => config.height - (y(d.value) ?? 0));
+    d3.selectAll('.val').remove();
+};
+/**
+ * Draws the chart bars, and sets the mouse pointer events.
+ * @param g the svg g element
+ * @param x the x axis scale
+ * @param y the y axis scale
+ * @param config the chart configuration
+ * @param data the chart data
+ */
+const drawBarsAndSetPointerEvents = (g, x, y, config, data) => {
+    const duration = 400;
+    g.selectAll('.bar')
+        .data(data)
+        .enter()
+        .append('rect')
+        .attr('class', 'bar')
+        .style('fill', (d, i) => config.color(i.toString()))
+        .on('mouseover', function (event, d) {
+        return onMouseOver$1(this, d, g, x, y, config);
+    })
+        .on('mouseout', function (event, d) {
+        return onMouseOut$1(this, d, x, y, config);
+    })
+        .attr('x', d => x(d.title) ?? '')
+        .attr('y', d => y(d.value))
+        .attr('width', x.bandwidth())
+        .transition()
+        .ease(d3.easeLinear)
+        .duration(duration)
+        .delay(function (d, i) {
+        const multiplier = 50;
+        return i * multiplier;
+    })
+        .attr('height', d => config.height - y(d.value));
+};
+/**
+ * Draws the bar chart.
+ * @param container the chart container
+ * @param data the chart data
+ * @param options the chart options
+ * @returns the chart configuration
+ */
+const drawBarChart = (container, data, options) => {
+    const config = generateConfiguration(defaultBarChartConfig, options, {});
+    const { g } = createContainer$4(container, config);
+    const x = d3
+        .scaleBand([0, config.width])
+        .padding(config.xAxisPadding)
+        .domain(data.map(d => d.title));
+    const y = d3.scaleLinear([config.height, 0]).domain([0, d3.max(data, d => d.value) ?? 1]);
+    createAxisX$1(g, x, config);
+    createAxisY$1(g, y, config);
+    createLegend$2(g, config);
+    drawBarsAndSetPointerEvents(g, x, y, config, data);
+    return config;
+};
+
+/**
+ * The force directed chart default configuration.
+ */
+const defaultForceDirectedChartConfig = Object.freeze({
+    chartTitle: '',
+    width: 600,
+    height: 600,
+    centerCalcMod: 1.6,
+    charge: {
+        strength: -10,
+        theta: 0.6,
+        distanceMax: 2000,
+    },
+    distance: 75,
+    fontSize: 10,
+    collisionRadius: 30,
+    margin: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
+    },
+    strokeWidth: 1.5,
+    labelTextWrapWidth: 60,
+    color: d3.scaleOrdinal(d3.schemeCategory10),
+});
+/**
+ * The force durected chart tick handler.
+ * @param link chart links
+ * @param node chart nodes
+ * @param text chart text
+ * @returns rotation angle
+ */
+const ticked = (link, node, text) => {
+    if (typeof link !== 'undefined') {
+        link
+            .attr('x1', d => d.source.x ?? 0)
+            .attr('y1', d => d.source.y ?? 0)
+            .attr('x2', d => d.target.x ?? 0)
+            .attr('y2', d => d.target.y ?? 0);
+    }
+    if (typeof node !== 'undefined') {
+        node.attr('cx', d => d.x ?? 0).attr('cy', d => d.y ?? 0);
+    }
+    if (typeof text !== 'undefined') {
+        const dx = 10;
+        const dy = 5;
+        text.attr('x', d => (d.x ?? 0) + dx).attr('y', d => (d.y ?? 0) - dy);
+    }
+    return 'rotate(0)';
+};
+/**
+ * Creates a container for the force directed chart.
+ * @param container the chart container
+ * @param config the chart configuration
+ * @returns the object with the svg element and the g element
+ */
+const createContainer$3 = (container, config) => {
+    const id = container.nativeElement.id ?? 'force-directed-0';
+    d3.select(`#${id}`).select('svg').remove();
+    const svg = d3
+        .select(`#${id}`)
+        .append('svg')
+        .attr('width', config.width + config.margin.left + config.margin.right)
+        .attr('height', config.height + config.margin.top + config.margin.bottom)
+        .attr('class', id);
+    const g = svg
+        .append('g')
+        .attr('transform', `translate(${config.width / 2 + config.margin.left},${config.height / 2 + config.margin.top})`);
+    return { svg, g };
+};
+/**
+ * Applies the force directed chart data.
+ * @param g the svg g element
+ * @param data the chart data
+ */
+const applyChartData = (g, data) => {
+    const imageXY = 10;
+    g.append('defs')
+        .selectAll('pattern')
+        .data(data.entities)
+        .enter()
+        .append('pattern')
+        .attr('id', (val, i) => `img-${val.index}`)
+        .attr('x', 0)
+        .attr('y', 0)
+        .attr('height', val => {
+        const baseValue = 30;
+        return baseValue + val.linksCount * 2;
+    })
+        .attr('width', val => {
+        const baseValue = 30;
+        return baseValue + val.linksCount * 2;
+    })
+        .append('image')
+        .attr('x', imageXY)
+        .attr('y', imageXY)
+        .attr('height', val => {
+        const baseValue = 30;
+        return baseValue + val.linksCount * 2;
+    })
+        .attr('width', val => {
+        const baseValue = 30;
+        return baseValue + val.linksCount * 2;
+    })
+        .attr('xlink:href', val => val.img);
+};
+/**
+ * Creates the force directed chart links.
+ * @param svg the svg element
+ * @param config the chart configuration
+ * @param data the chart data
+ * @returns the chart links
+ */
+const createLinks = (svg, config, data) => {
+    return svg
+        .selectAll('.link')
+        .data(data.links)
+        .enter()
+        .append('line')
+        .attr('class', 'link')
+        .style('stroke', '#000000')
+        .style('stroke-width', config.strokeWidth);
+};
+/**
+ * Creates the force directed chart forces.
+ * @param config the chart configuration
+ * @param data the chart data
+ * @returns the chart forces
+ */
+const createForces = (config, data) => {
+    return d3
+        .forceSimulation(data.nodes)
+        .force('link', d3.forceLink().id(d => d.index ?? 0))
+        .force('charge', d3.forceManyBody().strength(config.charge.strength).theta(config.charge.theta).distanceMax(config.charge.distanceMax))
+        .force('center', d3.forceCenter(config.width / config.centerCalcMod, config.height / config.centerCalcMod))
+        .force('collision', d3.forceCollide().radius(d => config.collisionRadius))
+        .force('link', d3
+        .forceLink(data.links)
+        .id(d => d.index ?? 0)
+        .distance(config.distance)
+        .links(data.links));
+};
+/**
+ * The force directed chart node drag start handler.
+ * @param event a drag event
+ * @param datum the chart data
+ * @param force the chart forces
+ */
+const nodeDragStartHandler = (event, datum, force) => {
+    if (!event.active && typeof force !== 'undefined') {
+        const alphaTarget = 0.3;
+        force.alphaTarget(alphaTarget).restart();
+    }
+    datum.fx = event.x;
+    datum.fy = event.y;
+};
+/**
+ * The force directed chart node drag handler.
+ * @param event a drag event
+ * @param datum the chart data
+ * @param config the chart configuration
+ */
+const nodeDragHandler = (event, datum, config) => {
+    datum.fx = event.x > config.margin.left && event.x < config.width + config.margin.right ? event.x : datum.fx;
+    datum.fy = event.y > config.margin.top && event.y < config.width + config.margin.bottom ? event.y : datum.fy;
+};
+/**
+ * The force directed chart node drag end handler.
+ * @param event a drag event
+ * @param datum the chart data
+ * @param force the chart forces
+ */
+const nodeDragEndHandler = (event, datum, force) => {
+    if (!event.active && typeof force !== 'undefined') {
+        force.alphaTarget(0);
+    }
+    datum.fx = null;
+    datum.fy = null;
+};
+/**
+ * Creates the force directed chart nodes.
+ * @param svg the svg element
+ * @param data the chart data
+ * @param force the chart forces
+ * @param config the chart configuration
+ * @returns the chart nodes
+ */
+const createNodes = (svg, data, force, config) => {
+    return svg
+        .selectAll('.node')
+        .data(data.nodes)
+        .enter()
+        .append('circle')
+        .attr('class', 'node')
+        .attr('r', val => {
+        const base = 5;
+        return base + (val.value ?? 0) + (val.linksCount ?? 0) * 2;
+    })
+        .style('stroke-width', val => {
+        const base = 5;
+        return base + (val.value ?? 0) + (val.linksCount ?? 0) * 2;
+    })
+        .style('fill', val => (typeof val.img === 'undefined' || val.img === '' ? '#f00000' : `url(${val.img})`))
+        .call(d3
+        .drag()
+        .on('start', function (event, datum) {
+        nodeDragStartHandler(event, datum, force);
+    })
+        .on('drag', function (event, datum) {
+        nodeDragHandler(event, datum, config);
+    })
+        .on('end', function (event, datum) {
+        nodeDragEndHandler(event, datum, force);
+    }));
+};
+/**
+ * Creates the force directed chart text labels.
+ * @param svg the svg element
+ * @param data the chart data
+ * @returns the chart text labels
+ */
+const createText = (svg, data) => {
+    return svg
+        .append('g')
+        .selectAll('text')
+        .data(data.nodes)
+        .enter()
+        .append('text')
+        .attr('class', 'legend')
+        .text(val => val.name ?? `N/A (id. ${val.index})`);
+};
+/**
+ * Draws the force directed chart.
+ * @param container the chart container
+ * @param data the chart data
+ * @param options the chart options
+ * @returns the chart configuration
+ */
+const drawForceDirectedChart = (container, data, options) => {
+    const config = generateConfiguration(defaultForceDirectedChartConfig, options, {});
+    const { svg, g } = createContainer$3(container, config);
+    applyChartData(g, data);
+    const link = createLinks(svg, config, data);
+    const force = createForces(config, data);
+    const node = createNodes(svg, data, force, config);
+    const text = createText(svg, data);
+    force.on('tick', () => {
+        ticked(link, node, text);
+    });
+    return config;
+};
+
+/**
+ * The line chart default configuration.
+ */
+const defaultLineChartConfig = Object.freeze({
+    chartTitle: '',
+    width: 350,
+    height: 350,
+    margin: {
+        top: 70,
+        right: 50,
+        bottom: 50,
+        left: 50,
+    },
+    transitionDuration: 400,
+    dotRadius: 3.5,
+    xAxisTitle: '',
+    yAxisTitle: '',
+    ticks: {
+        x: 5,
+        y: 10,
+    },
+    displayAxisLabels: true,
+    labelTextWrapWidth: 20,
+    color: d3.scaleOrdinal(d3.schemeCategory10),
+});
+/**
+ * Creates a container for the line chart.
+ * @param container the chart container
+ * @param config the chart configuration
+ * @returns the object with the svg element and the g element
+ */
+const createContainer$2 = (container, config) => {
+    const id = container.nativeElement.id ?? 'line-0';
+    d3.select(`#${id}`).select('svg').remove();
+    const svg = d3
+        .select(`#${id}`)
+        .append('svg')
+        .attr('width', config.width + config.margin.left + config.margin.right)
+        .attr('height', config.height + config.margin.top + config.margin.bottom)
+        .attr('class', id);
+    const g = svg.append('g').attr('transform', `translate(${config.margin.left},${config.margin.top / 2})`);
+    return { svg, g };
+};
+/**
+ * Wraps the line chart axis labels text.
+ * @param svgText the svg text elements
+ * @param width the chart axis label width
+ */
+const wrapSvgText$1 = (svgText, width) => {
+    svgText.each(function () {
+        const text = d3.select(this);
+        const words = text.text().split(/\s+/).reverse();
+        let line = [];
+        let lineNumber = 0;
+        const lineHeight = 1.4;
+        const y = text.attr('y');
+        const x = text.attr('x');
+        const dy = parseFloat(text.attr('dy') ?? 0);
+        let tspan = text.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', `${dy}em`); // axis label
+        let word = words.pop();
+        while (typeof word !== 'undefined') {
+            line.push(word ?? '');
+            tspan.text(line.join(' '));
+            if ((tspan.node()?.getComputedTextLength() ?? 0) > width) {
+                line.pop();
+                tspan.text(line.join(' '));
+                line = [word ?? ''];
+                lineNumber += 1;
+                tspan = text
+                    .append('tspan')
+                    .attr('x', 0)
+                    .attr('y', y)
+                    .attr('dy', `${lineNumber * lineHeight + dy}em`)
+                    .text(word ?? '');
+            }
+            word = words.pop();
+        }
+    });
+};
+/**
+ * Creates the legend.
+ * @param g the svg g element
+ * @param config the chart configuration
+ */
+const createLegend$1 = (g, config) => {
+    if (config.displayAxisLabels && config.xAxisTitle !== '') {
+        g.append('g')
+            .attr('transform', `translate(0, ${config.height + config.margin.bottom})`)
+            .append('text')
+            .style('font-size', '12px')
+            .attr('class', 'legend')
+            .attr('dx', '1.5em')
+            .attr('dy', '1em')
+            .text(`x - ${config.xAxisTitle}`);
+    }
+    if (config.displayAxisLabels && config.yAxisTitle !== '') {
+        g.append('g')
+            .attr('transform', `translate(0, ${config.height + config.margin.bottom})`)
+            .append('text')
+            .style('font-size', '12px')
+            .attr('class', 'legend')
+            .attr('dx', '1.5em')
+            .attr('dy', '2.5em')
+            .text(`y - ${config.yAxisTitle}`);
+    }
+    if (config.chartTitle !== '') {
+        g.append('g')
+            .attr('transform', `translate(0, 0)`)
+            .append('text')
+            .style('font-size', '12px')
+            .attr('class', 'legend')
+            .attr('dx', '1.5em')
+            .attr('dy', '-2em')
+            .text(config.chartTitle);
+    }
+};
+/**
+ * Creates the x axis.
+ * @param g the svg g element
+ * @param x the x axis scale
+ * @param config the chart configuration
+ */
+const createAxisX = (g, x, config) => {
+    const xLabels = g
+        .append('g')
+        .attr('transform', `translate(0, ${config.height})`)
+        .call(d3
+        .axisBottom(x)
+        .ticks(config.ticks.x)
+        .tickFormat(d => {
+        const date = new Date(d.valueOf());
+        const formattingOffset = 10;
+        const day = date.getDate();
+        const dd = day < formattingOffset ? `0${day}` : day;
+        const month = date.getMonth() + 1;
+        const mm = month < formattingOffset ? `0${month}` : month;
+        const year = date.getFullYear().toString();
+        const yy = year.slice(2);
+        const hours = date.getHours();
+        const hour = hours < formattingOffset ? `0${hours}` : hours;
+        const minutes = date.getMinutes();
+        const minute = minutes < formattingOffset ? `0${minutes}` : minutes;
+        return `${dd}/${mm}/${yy} ${hour}:${minute}`;
+    }))
+        .append('text');
+    g.selectAll('text').call(wrapSvgText$1, config.labelTextWrapWidth);
+    if (config.displayAxisLabels) {
+        xLabels.attr('transform', `translate(${config.width}, 0)`).attr('class', 'legend').attr('dx', '1.5em').attr('dy', '0.7em').text('x');
+    }
+};
+/**
+ * Creates the y axis.
+ * @param g the svg g element
+ * @param y the y axis scale
+ * @param config the chart configuration
+ */
+const createAxisY = (g, y, config) => {
+    const yLabels = g
+        .append('g')
+        .call(d3
+        .axisLeft(y)
+        .ticks(config.ticks.y)
+        .tickFormat(d => `${d}`))
+        .append('text');
+    if (config.displayAxisLabels) {
+        yLabels.attr('class', 'legend').attr('dy', '-1.5em').attr('class', 'legend').text('y');
+    }
+};
+/**
+ * The mouse over event handler.
+ * @param self an svg circle element
+ * @param d the chart data node
+ * @param g the svg g element
+ * @param config the chart configuration
+ */
+const onMouseOver = (self, d, g, config) => {
+    const duration = 400;
+    d3.select(self)
+        .transition()
+        .duration(duration)
+        .attr('r', config.dotRadius * 2);
+    const tooltipShift = 4;
+    const tooltipDy = -10;
+    g.append('text')
+        .attr('class', 'val')
+        .style('font-size', '11px')
+        .attr('dx', () => (config.width - config.margin.left - config.margin.right) / tooltipShift)
+        .attr('dy', () => tooltipDy)
+        .text(() => `${d.value} (${new Date(d.timestamp).toUTCString()})`);
+};
+/**
+ * The mouse out event handler.
+ * @param self an svg circle element
+ * @param config the chart configuration
+ */
+const onMouseOut = (self, config) => {
+    const duration = 400;
+    d3.select(self).attr('class', 'dot');
+    d3.select(self).transition().duration(duration).attr('r', config.dotRadius);
+    d3.selectAll('.val').remove();
+};
+/**
+ * Draws the chart lines, dots, and sets the mouse pointer events.
+ * @param g the svg g element
+ * @param x the x axis scale
+ * @param y the y axis scale
+ * @param config the chart configuration
+ * @param data the chart data
+ */
+const drawLinesDotsAndSetPointerEvents = (g, x, y, config, data) => {
+    const line = d3
+        .line()
+        .x(d => x(d.timestamp))
+        .y(d => y(d.value))
+        .curve(d3.curveMonotoneX);
+    g.append('path').attr('id', 'line').style('fill', 'none').style('stroke', 'red').style('stroke-width', '2px').attr('d', line(data));
+    g.selectAll('.dot')
+        .data(data)
+        .enter()
+        .append('circle')
+        .attr('class', 'dot')
+        .style('pointer-events', 'all')
+        .style('fill', (d, i) => config.color(i.toString()))
+        .on('mouseover', function (event, d) {
+        return onMouseOver(this, d, g, config);
+    })
+        .on('mouseout', function () {
+        return onMouseOut(this, config);
+    })
+        .attr('cx', function (d) {
+        return x(d.timestamp);
+    })
+        .attr('cy', function (d) {
+        return y(d.value);
+    })
+        .attr('r', 0)
+        .transition()
+        .ease(d3.easeLinear)
+        .duration(config.transitionDuration)
+        .delay((d, i) => {
+        const multiplier = 50;
+        return i * multiplier;
+    })
+        .attr('r', config.dotRadius);
+};
+/**
+ * Draws the line chart.
+ * @param container the chart container
+ * @param data the chart data
+ * @param options the chart options
+ * @returns the chart configuration
+ */
+const drawLineChart = (container, data, options) => {
+    const config = generateConfiguration(defaultLineChartConfig, options, {});
+    const { g } = createContainer$2(container, config);
+    const x = d3.scaleTime([0, config.width]).domain([Math.min(...data.map(d => d.timestamp)), Math.max(...data.map(d => d.timestamp))]);
+    const y = d3.scaleLinear([config.height, 0]).domain([0, d3.max(data, d => d.value) ?? 1]);
+    createAxisX(g, x, config);
+    createAxisY(g, y, config);
+    createLegend$1(g, config);
+    drawLinesDotsAndSetPointerEvents(g, x, y, config, data);
+    return config;
+};
+
+/**
+ * The pie chart default configuration.
+ */
+const defaultPieChartConfig = Object.freeze({
+    chartTitle: '',
+    width: 600,
+    height: 600,
+    margin: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
+    },
+    innerRadius: 0,
+    labelRadiusModifier: 50,
+    labelTextWrapWidth: 60,
+    color: d3.scaleOrdinal(d3.schemeCategory10),
+});
+/**
+ * Creates a container for the pie chart.
+ * @param container the chart container
+ * @param config the chart configuration
+ * @returns the object with the svg element and the g element
+ */
+const createContainer$1 = (container, config) => {
+    const id = container.nativeElement.id ?? 'pie-0';
+    d3.select(`#${id}`).select('svg').remove();
+    const svg = d3
+        .select(`#${id}`)
+        .append('svg')
+        .attr('width', config.width + config.margin.left + config.margin.right)
+        .attr('height', config.height + config.margin.top + config.margin.bottom)
+        .attr('class', id);
+    const g = svg
+        .append('g')
+        .attr('transform', `translate(${config.width / 2 + config.margin.left},${config.height / 2 + config.margin.top})`);
+    return { svg, g };
+};
+/**
+ * Draws the pie chart.
+ * @param container the chart container
+ * @param data the chart data
+ * @param options the chart options
+ * @returns the chart configuration
+ */
+const drawPieChart = (container, data, options) => {
+    const config = generateConfiguration(defaultPieChartConfig, options, {});
+    const { g } = createContainer$1(container, config);
+    const pie = d3.pie().value(datum => datum.y);
+    const radius = Math.min(config.width, config.height) / 2;
+    const arc = d3.arc().innerRadius(config.innerRadius).outerRadius(radius);
+    const arcs = g
+        .selectAll('arc')
+        .data(pie(data))
+        .enter()
+        .append('g')
+        .attr('class', 'arc')
+        .on('mouseover', function (event, d) {
+        d3.select('#tooltip')
+            .style('left', `${event.pageX}px`)
+            .style('top', `${event.pageY}px`)
+            .style('opacity', 1)
+            .select('#value')
+            .text(d.value);
+    })
+        .on('mouseout', function (event, d) {
+        d3.select('#tooltip').style('opacity', 0);
+    });
+    const label = d3
+        .arc()
+        .innerRadius(radius)
+        .outerRadius(radius + config.labelRadiusModifier);
+    arcs
+        .append('path')
+        .attr('fill', (d, i) => config.color(i.toString()))
+        .attr('d', arc);
+    const textDy = 5;
+    arcs
+        .append('text')
+        .attr('class', 'legend')
+        .attr('text-anchor', 'middle')
+        .attr('dy', textDy)
+        .attr('transform', d => `translate(${label.centroid(d)})`)
+        .text(d => d.data.y);
+    return config;
+};
+
+/**
+ * The radar chart default configuration.
+ */
+const defaultRadarChartConfig = Object.freeze({
+    chartTitle: '',
+    width: 350,
+    height: 350,
+    margin: {
+        top: 50,
+        right: 50,
+        bottom: 50,
+        left: 50,
+    },
+    levels: 3,
+    maxValue: 0,
+    lineFactor: 1.1,
+    labelFactor: 1.15,
+    labelTextWrapWidth: 60,
+    opacityArea: 0.35,
+    dotRadius: 4,
+    opacityCircles: 0.1,
+    strokeWidth: 2,
+    roundStrokes: false,
+    transitionDuration: 200,
+    color: d3.scaleOrdinal(d3.schemeCategory10),
+});
+/**
+ * Creates a container for the radar chart.
+ * @param container the chart container
+ * @param config the chart configuration
+ * @returns the object with the svg element and the g element
+ */
+const createContainer = (container, config) => {
+    const id = container.nativeElement.id ?? 'radar-0';
+    d3.select(`#${id}`).select('svg').remove();
+    const svg = d3
+        .select(`#${id}`)
+        .append('svg')
+        .attr('width', config.width + config.margin.left + config.margin.right)
+        .attr('height', config.height + config.margin.top + config.margin.bottom)
+        .attr('class', id);
+    const g = svg
+        .append('g')
+        .attr('transform', `translate(${config.width / 2 + config.margin.left},${config.height / 2 + config.margin.top})`);
+    return { svg, g };
+};
+/**
+ * Draws the radar chart circular grid.
+ * @param axisGrid the chart axis grid
+ * @param radius the chart radius value
+ * @param maxValue the maximum value of the chart axis
+ * @param config the chart configuration
+ */
+const drawCircularGrid = (axisGrid, radius, maxValue, config) => {
+    // background circles
+    axisGrid
+        .selectAll('.levels')
+        .data(d3.range(1, config.levels + 1).reverse())
+        .enter()
+        .append('circle')
+        .attr('class', 'grid-circle')
+        .attr('r', (d, i) => (radius / config.levels) * d)
+        .style('fill', '#CDCDCD')
+        .style('stroke', '#CDCDCD')
+        .style('fill-opacity', config.opacityCircles)
+        .style('filter', 'url(#glow)');
+    // text indicating at what % each level is
+    const axisGridX = 4;
+    axisGrid
+        .selectAll('.axis-label')
+        .data(d3.range(1, config.levels + 1).reverse())
+        .enter()
+        .append('text')
+        .attr('class', 'axis-label')
+        .attr('x', axisGridX)
+        .attr('y', d => (-d * radius) / config.levels)
+        .attr('dy', '0.4em')
+        .style('font-size', '10px')
+        .attr('fill', '#737373')
+        .text((d, i) => (maxValue * d) / config.levels);
+};
+/**
+ * Wraps the chart axis labels text.
+ * @param svgText the svg text elements
+ * @param width the chart axis label width
+ */
+const wrapSvgText = (svgText, width) => {
+    svgText.each(function () {
+        const text = d3.select(this);
+        const words = text.text().split(/\s+/).reverse();
+        let line = [];
+        let lineNumber = 0;
+        const lineHeight = 1.4;
+        const y = text.attr('y');
+        const x = text.attr('x');
+        const dy = parseFloat(text.attr('dy') ?? 0);
+        let tspan = text.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', `${dy}em`);
+        let word = words.pop();
+        while (typeof word !== 'undefined') {
+            line.push(word ?? '');
+            tspan.text(line.join(' '));
+            if ((tspan.node()?.getComputedTextLength() ?? 0) > width) {
+                line.pop();
+                tspan.text(line.join(' '));
+                line = [word ?? ''];
+                lineNumber += 1;
+                tspan = text
+                    .append('tspan')
+                    .attr('x', x)
+                    .attr('y', y)
+                    .attr('dy', `${lineNumber * lineHeight + dy}em`)
+                    .text(word ?? '');
+            }
+            word = words.pop();
+        }
+    });
+};
+/**
+ * Creates the legend.
+ * @param g the svg g element
+ * @param config the chart configuration
+ */
+const createLegend = (g, config) => {
+    if (config.chartTitle !== '') {
+        g.append('g')
+            .attr('transform', `translate(-${config.width / 2 + config.margin.left / 2}, -${config.height / 2 + config.margin.top / 2})`)
+            .append('text')
+            .style('font-size', '12px')
+            .attr('class', 'legend')
+            .text(config.chartTitle);
+    }
+};
+/**
+ * Draws the radar chart axis.
+ * @param axisGrid the chart axis grid
+ * @param axisNames the chart axis names
+ * @param radiusScale the chart radius scale
+ * @param maxValue the maximum value of the chart axis
+ * @param angleSlice the chart angle slice value
+ * @param config the chart configuration
+ */
+const drawAxis = (axisGrid, axisNames, radiusScale, maxValue, angleSlice, config) => {
+    // create the straight lines radiating outward from the center
+    const axis = axisGrid.selectAll('.axis').data(axisNames).enter().append('g').attr('class', 'axis');
+    // append the lines
+    axis
+        .append('line')
+        .attr('x1', 0)
+        .attr('y1', 0)
+        .attr('x2', (d, i) => radiusScale(maxValue * config.lineFactor) * Math.cos(angleSlice * i - Math.PI / 2))
+        .attr('y2', (d, i) => radiusScale(maxValue * config.lineFactor) * Math.sin(angleSlice * i - Math.PI / 2))
+        .attr('class', 'line')
+        .style('stroke', 'white')
+        .style('stroke-width', '2px');
+    // append the labels at each axis
+    axis
+        .append('text')
+        .attr('class', 'legend')
+        .style('font-size', '11px')
+        .attr('text-anchor', 'middle')
+        .attr('dy', '0.35em')
+        .attr('x', (d, i) => radiusScale(maxValue * config.labelFactor) * Math.cos(angleSlice * i - Math.PI / 2))
+        .attr('y', (d, i) => radiusScale(maxValue * config.labelFactor) * Math.sin(angleSlice * i - Math.PI / 2))
+        .text(d => d)
+        .call(wrapSvgText, config.labelTextWrapWidth);
+};
+/**
+ * Draws the radar chart blobs.
+ * @param radiusScale the chart radius scale
+ * @param angleSlice the chart angle slice value
+ * @param g the svg g element
+ * @param data the chart data
+ * @param config the chart configuration
+ */
+const drawRadarChartBlobs = (radiusScale, angleSlice, g, data, config) => {
+    // the radial line function
+    const radarLine = d3
+        .lineRadial()
+        .radius(d => radiusScale(d.value))
+        .angle((d, i) => i * angleSlice);
+    // create a wrapper for the blobs
+    const blobWrapper = g.selectAll('.radar-wrapper').data(data).enter().append('g').attr('class', 'radar-wrapper');
+    // append the backgrounds
+    blobWrapper
+        .append('path')
+        .attr('class', 'radar-area')
+        .attr('d', (d, i) => radarLine(d))
+        .style('fill', (d, i) => config.color(i.toString()))
+        .style('fill-opacity', config.opacityArea)
+        .on('mouseover', function (d, i) {
+        // dim all blobs
+        const radarAreaFillOpacity = 0.1;
+        d3.selectAll('.radar-area').transition().duration(config.transitionDuration).style('fill-opacity', radarAreaFillOpacity);
+        // bring back the hovered over blob
+        const fillOpacity = 0.7;
+        d3.select(this).transition().duration(config.transitionDuration).style('fill-opacity', fillOpacity);
+    })
+        .on('mouseout', () => {
+        // bring back all blobs
+        d3.selectAll('.radar-area').transition().duration(config.transitionDuration).style('fill-opacity', config.opacityArea);
+    });
+    // create the outlines
+    blobWrapper
+        .append('path')
+        .attr('class', 'radar-stroke')
+        .attr('d', (d, i) => radarLine(d))
+        .style('stroke-width', `${config.strokeWidth}px`)
+        .style('stroke', (d, i) => config.color(i.toString()))
+        .style('fill', 'none')
+        .style('filter', 'url(#glow)');
+    // append the circles
+    const blobWrapperFillOpacity = 0.8;
+    blobWrapper
+        .selectAll('.radar-circle')
+        .data((d, i) => d)
+        .enter()
+        .append('circle')
+        .attr('class', 'radar-circle')
+        .attr('r', config.dotRadius)
+        .attr('cx', (d, i) => radiusScale(d.value) * Math.cos(angleSlice * i - Math.PI / 2))
+        .attr('cy', (d, i) => radiusScale(d.value) * Math.sin(angleSlice * i - Math.PI / 2))
+        .style('fill', (d, i, j) => config.color(j.toString()))
+        .style('fill-opacity', blobWrapperFillOpacity);
+};
+/**
+ * Appends the invisible tooltip circles.
+ * @param g the svg g element
+ * @param data the chart data
+ * @param radiusScale the chart radius scale
+ * @param angleSlice the chart angle slice value
+ * @param config the chart configuration
+ */
+const appendInvisibleTooltipCircles = (g, data, radiusScale, angleSlice, config) => {
+    // wrapper for the invisible circles on top
+    const blobCircleWrapper = g.selectAll('.radar-circle-wrapper').data(data).enter().append('g').attr('class', 'radar-circle-wrapper');
+    // set up the small tooltip for when you hover over a circle
+    const tooltip = g.append('text').attr('class', 'tooltip').style('opacity', 0);
+    // append a set of invisible circles on top for the mouseover pop-up
+    const blobCircleWrapperRadiusMultiplier = 1.5;
+    blobCircleWrapper
+        .selectAll('.radar-invisible-circle')
+        .data((d, i) => d)
+        .enter()
+        .append('circle')
+        .attr('class', 'radar-invisible-circle')
+        .attr('r', config.dotRadius * blobCircleWrapperRadiusMultiplier)
+        .attr('cx', (d, i) => radiusScale(d.value) * Math.cos(angleSlice * i - Math.PI / 2))
+        .attr('cy', (d, i) => radiusScale(d.value) * Math.sin(angleSlice * i - Math.PI / 2))
+        .style('fill', 'none')
+        .style('pointer-events', 'all')
+        .on('mouseover', function (event, i) {
+        const modifier = 10;
+        const newX = parseFloat(d3.select(this).attr('cx')) - modifier;
+        const newY = parseFloat(d3.select(this).attr('cy')) - modifier;
+        const nodeData = event.target['__data__'];
+        const tooltipText = `${nodeData.value} ${nodeData.unit}`;
+        tooltip.attr('x', newX).attr('y', newY).text(tooltipText).transition().duration(config.transitionDuration).style('opacity', 1);
+    })
+        .on('mouseout', () => {
+        tooltip.transition().duration(config.transitionDuration).style('opacity', 0);
+    });
+};
+/**
+ * Draws the radar chart.
+ * @param container the chart container
+ * @param data the chart data
+ * @param options the chart options
+ * @returns the hart configuration
+ */
+const drawRadarChart = (container, data, options) => {
+    const config = generateConfiguration(defaultRadarChartConfig, options, {});
+    const maxValue = Math.max(config.maxValue, d3.max(data, i => d3.max(i.map(o => o.value))) ?? 0);
+    const axisNames = data[0].map((i, j) => i.axis);
+    const totalAxis = axisNames.length;
+    const radius = Math.min(config.width / 2 - config.margin.left / 2, config.height / 2 - config.margin.top / 2);
+    const angleSlice = (Math.PI * 2) / totalAxis;
+    const radiusScale = d3.scaleLinear([0, radius]).domain([0, maxValue]);
+    const { g } = createContainer(container, config);
+    // filter for the outside glow
+    const filter = g.append('defs').append('filter').attr('id', 'glow');
+    filter.append('feGaussianBlur').attr('stdDeviation', '2.5').attr('result', 'coloredBlur');
+    const feMerge = filter.append('feMerge');
+    feMerge.append('feMergeNode').attr('in', 'coloredBlur');
+    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
+    const axisGrid = g.append('g').attr('class', 'axis-wrapper');
+    drawCircularGrid(axisGrid, radius, maxValue, config);
+    drawAxis(axisGrid, axisNames, radiusScale, maxValue, angleSlice, config);
+    createLegend(g, config);
+    drawRadarChartBlobs(radiusScale, angleSlice, g, data, config);
+    appendInvisibleTooltipCircles(g, data, radiusScale, angleSlice, config);
+    return config;
+};
+
+const d3ChartFactory = () => ({
+    drawPieChart,
+    drawRadarChart,
+    drawBarChart,
+    drawLineChart,
+    drawForceDirectedChart,
+});
+const D3_CHART_FACTORY = new InjectionToken('D3_CHART_FACTORY', {
+    providedIn: 'root',
+    factory: d3ChartFactory,
+});
+
+class AppBarChartComponent {
+    constructor(doc, d3Factory) {
+        this.doc = doc;
+        this.d3Factory = d3Factory;
+        /**
+         * The chart id.
+         */
+        this.chartId = 'bar-0';
+        /**
+         * The chart data.
+         */
+        this.data = [];
+        /**
+         * The chart options.
+         */
+        this.options = {};
+    }
+    /**
+     * The chart options constructor.
+     * @returns chart options
+     */
+    chartOptions() {
+        const bodyWidthAdjustment = 10;
+        const width = Math.min(this.options.width ?? defaultBarChartConfig.width, this.doc.body.clientWidth - defaultBarChartConfig.margin.left - defaultBarChartConfig.margin.right - bodyWidthAdjustment);
+        const height = Math.min(this.options.height ?? width, this.doc.body.clientWidth - defaultBarChartConfig.margin.top - defaultBarChartConfig.margin.bottom - bodyWidthAdjustment);
+        const yAxisTicks = Math.max(...this.data.map(item => item.value));
+        const options = {
+            width,
+            height,
+            yAxisTicks,
+            ...this.options,
+        };
+        return options;
+    }
+    /**
+     * Draws the chart.
+     */
+    drawChart() {
+        if (typeof this.container !== 'undefined') {
+            const options = this.chartOptions();
+            this.d3Factory.drawBarChart(this.container, this.data, options);
+        }
+    }
+    /**
+     * Actually draws the chart after the component view is initialized.
+     */
+    ngAfterViewInit() {
+        this.drawChart();
+    }
+    /**
+     * Redraws the chart on changes.
+     */
+    ngOnChanges(changes) {
+        const data = changes.data?.currentValue;
+        const options = changes.options?.currentValue;
+        if ((typeof data !== 'undefined' && data !== null) || (typeof options !== 'undefined' && options !== null)) {
+            this.drawChart();
+        }
+    }
+}
+/** @nocollapse */ AppBarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppBarChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AppBarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppBarChartComponent, selector: "app-bar-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppBarChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [D3_CHART_FACTORY]
+                }] }]; }, propDecorators: { chartId: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
+class AppPieChartComponent {
+    constructor(doc, d3Factory) {
+        this.doc = doc;
+        this.d3Factory = d3Factory;
+        /**
+         * The chart id.
+         */
+        this.chartId = 'pie-0';
+        /**
+         * The chart data.
+         */
+        this.data = [];
+        /**
+         * The chart options.
+         */
+        this.options = {};
+    }
+    /**
+     * The chart options constructor.
+     * @returns chart options
+     */
+    chartOptions() {
+        const margin = { top: 50, right: 50, bottom: 50, left: 50 };
+        const minWidth = 350;
+        const modifiers = {
+            width: 10,
+            height: 20,
+        };
+        const width = Math.min(minWidth, this.doc.body.clientWidth - modifiers.width) - margin.left - margin.right;
+        const height = Math.min(width, this.doc.body.clientHeight - margin.top - margin.bottom - modifiers.height);
+        const options = {
+            width,
+            height,
+            margin,
+            ...this.options,
+        };
+        return options;
+    }
+    /**
+     * Draws the chart.
+     */
+    drawChart() {
+        if (typeof this.container !== 'undefined') {
+            const options = this.chartOptions();
+            this.d3Factory.drawPieChart(this.container, this.data, options);
+        }
+    }
+    /**
+     * Actually draws the chart after the component view is initialized.
+     */
+    ngAfterViewInit() {
+        this.drawChart();
+    }
+    /**
+     * Redraws the chart on changes.
+     */
+    ngOnChanges(changes) {
+        const data = changes.data?.currentValue;
+        const options = changes.options?.currentValue;
+        if ((typeof data !== 'undefined' && data !== null) || (typeof options !== 'undefined' && options !== null)) {
+            this.drawChart();
+        }
+    }
+}
+/** @nocollapse */ AppPieChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppPieChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AppPieChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppPieChartComponent, selector: "app-pie-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n  <div id=\"{{ chartId }}\" #container></div>\n\n  <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host canvas{width:auto!important;height:150px}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppPieChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-pie-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n  <div id=\"{{ chartId }}\" #container></div>\n\n  <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host canvas{width:auto!important;height:150px}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [D3_CHART_FACTORY]
+                }] }]; }, propDecorators: { chartId: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
+class AppRadarChartComponent {
+    constructor(doc, d3Factory) {
+        this.doc = doc;
+        this.d3Factory = d3Factory;
+        /**
+         * The chart id.
+         */
+        this.chartId = 'radar-0';
+        /**
+         * The chart data.
+         */
+        this.data = [[]];
+        /**
+         * The chart options.
+         */
+        this.options = {};
+    }
+    /**
+     * The chart options constructor.
+     * @returns chart options
+     */
+    chartOptions() {
+        const xsOffset = 500;
+        const smOffset = 800;
+        const mdOffset = 1024;
+        const labelFactorDefault = 1.15;
+        const labelFactorMd = 1.15;
+        const labelFactorSm = 1.15;
+        const labelFactorXs = 1.4;
+        const wrapWidthDefault = 85;
+        const wrapWidthMd = 80;
+        const wrapWidthXs = 70;
+        const bodyWidthAdjustment = 10;
+        const width = Math.min(this.options.width ?? defaultRadarChartConfig.width, this.doc.body.clientWidth - defaultRadarChartConfig.margin.left - defaultRadarChartConfig.margin.right - bodyWidthAdjustment);
+        const height = Math.min(width, this.doc.body.clientHeight - defaultRadarChartConfig.margin.top - defaultRadarChartConfig.margin.bottom - bodyWidthAdjustment);
+        const labelFactor = width <= xsOffset ? labelFactorXs : width <= smOffset ? labelFactorSm : width <= mdOffset ? labelFactorMd : labelFactorDefault;
+        const labelTextWrapWidth = width <= xsOffset ? wrapWidthXs : width <= mdOffset ? wrapWidthMd : wrapWidthDefault;
+        const options = {
+            width,
+            height,
+            maxValue: this.data[0].reduce((accumulator, item) => (item.value > accumulator ? item.value : accumulator), 0) + 1,
+            levels: 5,
+            roundStrokes: true,
+            labelFactor,
+            labelTextWrapWidth,
+            ...this.options,
+        };
+        return options;
+    }
+    /**
+     * Draws the chart.
+     */
+    drawChart() {
+        if (typeof this.container !== 'undefined') {
+            const options = this.chartOptions();
+            this.d3Factory.drawRadarChart(this.container, this.data, options);
+        }
+    }
+    /**
+     * Actually draws the chart after the component view is initialized.
+     */
+    ngAfterViewInit() {
+        this.drawChart();
+    }
+    /**
+     * Redraws the chart on changes.
+     */
+    ngOnChanges(changes) {
+        const currentValue = changes.data?.currentValue;
+        const options = changes.options?.currentValue;
+        if ((typeof currentValue !== 'undefined' && currentValue !== null) || (typeof options !== 'undefined' && options !== null)) {
+            this.drawChart();
+        }
+    }
+}
+/** @nocollapse */ AppRadarChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppRadarChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AppRadarChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppRadarChartComponent, selector: "app-radar-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppRadarChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-radar-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [D3_CHART_FACTORY]
+                }] }]; }, propDecorators: { chartId: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
+class AppForceDirectedChartComponent {
+    constructor(doc, d3Factory) {
+        this.doc = doc;
+        this.d3Factory = d3Factory;
+        /**
+         * The chart identifier.
+         */
+        this.chartId = 'force-0';
+        /**
+         * The chart data.
+         */
+        this.data = {
+            domains: [],
+            entities: [],
+            links: [],
+            nodes: [],
+        };
+        /**
+         * The chart options.
+         */
+        this.options = {};
+    }
+    /**
+     * The chart options constructor.
+     * @returns chart options
+     */
+    chartOptions() {
+        const margin = { top: 50, right: 50, bottom: 50, left: 50 };
+        const minWidth = 350;
+        const modifiers = {
+            width: 10,
+            height: 20,
+        };
+        const width = Math.min(minWidth, this.doc.body.clientWidth - modifiers.width) - margin.left - margin.right;
+        const height = Math.min(width, this.doc.body.clientHeight - margin.top - margin.bottom - modifiers.height);
+        const options = { width, height, margin, ...this.options };
+        return options;
+    }
+    /**
+     * Draws the chart.
+     */
+    drawChart() {
+        if (typeof this.container !== 'undefined') {
+            const options = this.chartOptions();
+            this.d3Factory.drawForceDirectedChart(this.container, this.data, options);
+        }
+    }
+    /**
+     * Actually draws the chart after the component view is initialized.
+     */
+    ngAfterViewInit() {
+        this.drawChart();
+    }
+    /**
+     * Redraws the chart on changes.
+     */
+    ngOnChanges(changes) {
+        const prevData = changes.data?.previousValue;
+        const nextData = changes.data?.currentValue;
+        const options = changes.options?.currentValue;
+        if ((Boolean(changes.data?.currentValue) && (prevData?.nodes ?? []).length !== (nextData?.nodes ?? []).length) ||
+            (typeof options !== 'undefined' && options !== null)) {
+            this.drawChart();
+        }
+    }
+}
+/** @nocollapse */ AppForceDirectedChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppForceDirectedChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AppForceDirectedChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppForceDirectedChartComponent, selector: "app-force-directed-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n  <div id=\"{{ chartId }}\" #container></div>\n\n  <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppForceDirectedChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-force-directed-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n  <div id=\"{{ chartId }}\" #container></div>\n\n  <small class=\"container--chart-title\">{{ options.chartTitle }}</small>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}:host .container--chart-title{display:block;text-align:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [D3_CHART_FACTORY]
+                }] }]; }, propDecorators: { chartId: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
+class AppLineChartComponent {
+    constructor(doc, d3Factory) {
+        this.doc = doc;
+        this.d3Factory = d3Factory;
+        /**
+         * The chart id.
+         */
+        this.chartId = 'line-0';
+        /**
+         * The chart data.
+         */
+        this.data = [];
+        /**
+         * The chart options.
+         */
+        this.options = {};
+    }
+    /**
+     * The chart options constructor.
+     * @returns chart options
+     */
+    chartOptions() {
+        const bodyWidthAdjustment = 10;
+        const width = Math.min(this.options.width ?? defaultLineChartConfig.width, this.doc.body.clientWidth - defaultLineChartConfig.margin.left - defaultLineChartConfig.margin.right - bodyWidthAdjustment);
+        const xTicksScale = 50;
+        const ticks = {
+            x: width / xTicksScale,
+            y: Math.max(...this.data.map(item => item.value)),
+        };
+        const height = Math.min(this.options.height ?? width, this.doc.body.clientWidth - defaultLineChartConfig.margin.top - defaultLineChartConfig.margin.bottom - bodyWidthAdjustment);
+        const options = {
+            width,
+            height,
+            ticks,
+            ...this.options,
+        };
+        return options;
+    }
+    /**
+     * Draws the chart.
+     */
+    drawChart() {
+        if (typeof this.container !== 'undefined') {
+            const options = this.chartOptions();
+            this.d3Factory.drawLineChart(this.container, this.data, options);
+        }
+    }
+    /**
+     * Actually draws the chart after the component view is initialized.
+     */
+    ngAfterViewInit() {
+        this.drawChart();
+    }
+    /**
+     * Redraws the chart on changes.
+     */
+    ngOnChanges(changes) {
+        const data = changes.data?.currentValue;
+        const options = changes.options?.currentValue;
+        if ((typeof data !== 'undefined' && data !== null) || (typeof options !== 'undefined' && options !== null)) {
+            this.drawChart();
+        }
+    }
+}
+/** @nocollapse */ AppLineChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppLineChartComponent, deps: [{ token: DOCUMENT }, { token: D3_CHART_FACTORY }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AppLineChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppLineChartComponent, selector: "app-line-chart", inputs: { chartId: "chartId", data: "data", options: "options" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppLineChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-line-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" id=\"{{ chartId }}\" #container></div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center}:host .container{flex:0 1 auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [D3_CHART_FACTORY]
+                }] }]; }, propDecorators: { chartId: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
+class AppChartExamplesComponent {
+    constructor(breakpointObserver) {
+        this.breakpointObserver = breakpointObserver;
+        this.breakpoint$ = this.breakpointObserver
+            .observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
+            .pipe(map(result => Object.keys(result.breakpoints).find(item => result.breakpoints[item]) ?? 'unknown'));
+        this.barChartConfig$ = this.breakpoint$.pipe(switchMap(() => timer(this.timeout).pipe(first(), map(() => ({ data: this.barChartData, options: this.barChartOptions() })))));
+        this.lineChartConfig$ = this.breakpoint$.pipe(switchMap(() => timer(this.timeout).pipe(first(), map(() => ({ data: this.lineChartData, options: this.lineChartOptions() })))));
+        this.radarChartConfig$ = this.breakpoint$.pipe(switchMap(() => timer(this.timeout).pipe(first(), map(() => ({ data: this.radarChartData, options: this.radarChartOptions() })))));
+        this.pieChartConfig$ = this.breakpoint$.pipe(switchMap(() => timer(this.timeout).pipe(first(), map(() => ({ data: this.pieChartData, options: this.pieChartOptions() })))));
+        this.forceDirectedChartConfig$ = this.breakpoint$.pipe(switchMap(() => timer(this.timeout).pipe(first(), map(() => ({ data: this.forceDirectedChartData, options: this.forceDirectedChartOptions() })))));
+        this.timeout = 100;
+    }
+    /**
+     * Sample bar chart data.
+     */
+    get barChartData() {
+        return [
+            { title: 'one', value: 1 },
+            { title: 'two', value: 2 },
+            { title: 'three', value: 3 },
+            { title: 'four', value: 4 },
+            { title: 'five', value: 5 },
+        ];
+    }
+    /**
+     * Sample line chart data.
+     */
+    get lineChartData() {
+        const increment = 10000;
+        const multiplier = 2;
+        return [
+            { timestamp: new Date().getTime(), value: 1 },
+            { timestamp: new Date().getTime() + increment, value: 10 },
+            { timestamp: new Date().getTime() + increment * multiplier, value: 3 },
+            { timestamp: new Date().getTime() + increment * Math.pow(multiplier, multiplier), value: 5 },
+            { timestamp: new Date().getTime() + increment * Math.pow(multiplier, multiplier) * multiplier, value: 4 },
+            { timestamp: new Date().getTime() + increment * Math.pow(multiplier, multiplier) * Math.pow(multiplier, multiplier), value: 7 },
+            {
+                timestamp: new Date().getTime() + increment * Math.pow(multiplier, multiplier) * Math.pow(multiplier, multiplier) * multiplier,
+                value: 8,
+            },
+        ];
+    }
+    /**
+     * Sample radar chart data.
+     */
+    get radarChartData() {
+        return [
+            [
+                { axis: 'one', value: 1, unit: 'x' },
+                { axis: 'two', value: 2, unit: 'x' },
+                { axis: 'three', value: 3, unit: 'x' },
+                { axis: 'four', value: 4, unit: 'x' },
+                { axis: 'five', value: 5, unit: 'x' },
+                { axis: 'six', value: 6, unit: 'x' },
+                { axis: 'seven', value: 7, unit: 'x' },
+                { axis: 'eight', value: 8, unit: 'x' },
+                { axis: 'nine (long labels are wrapped)', value: 9, unit: 'x' },
+            ],
+            [
+                { axis: 'one', value: 9, unit: 'y' },
+                { axis: 'two', value: 8, unit: 'y' },
+                { axis: 'three', value: 7, unit: 'y' },
+                { axis: 'four', value: 6, unit: 'y' },
+                { axis: 'five', value: 5, unit: 'y' },
+                { axis: 'six', value: 4, unit: 'y' },
+                { axis: 'seven', value: 3, unit: 'y' },
+                { axis: 'eight', value: 2, unit: 'y' },
+                { axis: 'nine (long labels are wrapped)', value: 1, unit: 'y' },
+            ],
+        ];
+    }
+    /**
+     * Sample pie chart data.
+     */
+    get pieChartData() {
+        return [
+            { key: 'one', y: 1 },
+            { key: 'two', y: 2 },
+            { key: 'three', y: 3 },
+            { key: 'four', y: 4 },
+            { key: 'five', y: 5 },
+            { key: 'six', y: 6 },
+        ];
+    }
+    /**
+     * Sample force directed chart data.
+     */
+    get forceDirectedChartData() {
+        const input = {
+            domains: ['first', 'second', 'third'],
+            entities: [
+                { name: 'one', domains: ['first'], img: '' },
+                { name: 'two', domains: ['second'], img: '' },
+                { name: 'three', domains: ['third'], img: '' },
+                { name: 'four', domains: ['first', 'second'], img: '' },
+                { name: 'five', domains: ['second'], img: '' },
+                { name: 'six', domains: ['third', 'second'], img: '' },
+                { name: 'seven', domains: ['second'], img: '' },
+                { name: 'eight', domains: ['third'], img: '' },
+            ],
+        };
+        const domains = input.domains.map((name, index) => ({ index, name, value: 1 }));
+        const entities = input.entities.map((app, index) => ({
+            index: index,
+            name: app.name,
+            domains: [...app.domains],
+            img: app.img,
+            linksCount: 0,
+        }));
+        const nodes = [...entities];
+        const links = entities
+            .map(entity => {
+            return entity.domains.map(domain => {
+                const source = domains.find(value => domain === value.name)?.index ?? -1;
+                const target = entity.index;
+                return { source, target };
+            });
+        })
+            .reduce((accumulator, item) => (Array.isArray(item) ? [...accumulator, ...item] : [...accumulator, item]), [])
+            .filter(link => link.source !== -1 && link.target !== -1 && typeof link.target !== 'undefined');
+        const chartData = {
+            domains,
+            entities: entities.map(item => ({
+                ...item,
+                linksCount: links.reduce((acc, link) => (link.target === item.index ? acc + 1 : acc), 0),
+            })),
+            links,
+            nodes,
+        };
+        return chartData;
+    }
+    barChartOptions() {
+        return {
+            chartTitle: 'Example bar chart',
+            xAxisTitle: 'long x axis title',
+            yAxisTitle: 'long y axis title',
+        };
+    }
+    lineChartOptions() {
+        return {
+            chartTitle: 'Example line chart',
+            xAxisTitle: 'Date range',
+            yAxisTitle: 'Value range',
+        };
+    }
+    radarChartOptions() {
+        return {
+            chartTitle: 'Example radar chart',
+        };
+    }
+    pieChartOptions() {
+        return {
+            chartTitle: 'Example pie chart',
+        };
+    }
+    forceDirectedChartOptions() {
+        return {
+            chartTitle: 'Example force directed chart',
+        };
+    }
+}
+/** @nocollapse */ AppChartExamplesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppChartExamplesComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AppChartExamplesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: AppChartExamplesComponent, selector: "app-chart-examples", ngImport: i0, template: "<div class=\"container\" *ngIf=\"barChartConfig$ | async as config\">\n  <app-bar-chart [chartId]=\"'bar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-bar-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"lineChartConfig$ | async as config\">\n  <app-line-chart [chartId]=\"'line-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-line-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"radarChartConfig$ | async as config\">\n  <app-radar-chart [chartId]=\"'radar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-radar-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"pieChartConfig$ | async as config\">\n  <app-pie-chart [chartId]=\"'pie-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-pie-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"forceDirectedChartConfig$ | async as config\">\n  <app-force-directed-chart\n    [chartId]=\"'force-directed-example-1'\"\n    [data]=\"config.data\"\n    [options]=\"config.options\"\n  ></app-force-directed-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{flex:1 1 auto;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AppPieChartComponent, selector: "app-pie-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: AppRadarChartComponent, selector: "app-radar-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: AppForceDirectedChartComponent, selector: "app-force-directed-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: AppBarChartComponent, selector: "app-bar-chart", inputs: ["chartId", "data", "options"] }, { kind: "component", type: AppLineChartComponent, selector: "app-line-chart", inputs: ["chartId", "data", "options"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppChartExamplesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chart-examples', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" *ngIf=\"barChartConfig$ | async as config\">\n  <app-bar-chart [chartId]=\"'bar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-bar-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"lineChartConfig$ | async as config\">\n  <app-line-chart [chartId]=\"'line-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-line-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"radarChartConfig$ | async as config\">\n  <app-radar-chart [chartId]=\"'radar-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-radar-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"pieChartConfig$ | async as config\">\n  <app-pie-chart [chartId]=\"'pie-example-1'\" [data]=\"config.data\" [options]=\"config.options\"></app-pie-chart>\n</div>\n\n<hr [ngStyle]=\"{ width: '100%' }\" />\n\n<div class=\"container\" *ngIf=\"forceDirectedChartConfig$ | async as config\">\n  <app-force-directed-chart\n    [chartId]=\"'force-directed-example-1'\"\n    [data]=\"config.data\"\n    [options]=\"config.options\"\n  ></app-force-directed-chart>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}:host .container{flex:1 1 auto;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; } });
+
+class AppClientD3ChartsModule {
+}
+/** @nocollapse */ AppClientD3ChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppClientD3ChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ AppClientD3ChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: AppClientD3ChartsModule, declarations: [AppPieChartComponent,
+        AppRadarChartComponent,
+        AppForceDirectedChartComponent,
+        AppBarChartComponent,
+        AppLineChartComponent,
+        AppChartExamplesComponent], imports: [CommonModule], exports: [AppPieChartComponent,
+        AppRadarChartComponent,
+        AppForceDirectedChartComponent,
+        AppBarChartComponent,
+        AppLineChartComponent,
+        AppChartExamplesComponent] });
+/** @nocollapse */ AppClientD3ChartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppClientD3ChartsModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: AppClientD3ChartsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        AppPieChartComponent,
+                        AppRadarChartComponent,
+                        AppForceDirectedChartComponent,
+                        AppBarChartComponent,
+                        AppLineChartComponent,
+                        AppChartExamplesComponent,
+                    ],
+                    exports: [
+                        AppPieChartComponent,
+                        AppRadarChartComponent,
+                        AppForceDirectedChartComponent,
+                        AppBarChartComponent,
+                        AppLineChartComponent,
+                        AppChartExamplesComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppBarChartComponent, AppChartExamplesComponent, AppClientD3ChartsModule, AppForceDirectedChartComponent, AppLineChartComponent, AppPieChartComponent, AppRadarChartComponent, defaultBarChartConfig, defaultForceDirectedChartConfig, defaultLineChartConfig, defaultPieChartConfig, defaultRadarChartConfig, drawBarChart, drawForceDirectedChart, drawLineChart, drawPieChart, drawRadarChart };
+//# sourceMappingURL=rfprodz-client-d3-charts.mjs.map