add example pod

1 year ago · 0cb408c9b5
2 changed files with 102 additions and 0 deletions
--- a/example/example.html
+++ b/example/example.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+
+    <script src="../dist/index.dev.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="chart" style="width: 50%; height: 500px;"></div>
+
+    <script type="text/javascript">
+      const startTime = 1590590148;
+      const arrayLength = 20;
+      const data1 = Array.from({ length: arrayLength }, (el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 40)]);
+
+      let options = {
+        renderLegend: false, usePanning: false,
+        axis: {
+          y: { invert: false, range: [0, 350] },
+          y1: { isActive: true, range: [0, 10],  ticksCount: 8 },
+          x: { format: 'time' }
+        },
+        zoomEvents: {
+          mouse: { zoom: { isActive: false } },
+          scroll: { zoom: { isActive: false } }
+        },
+      }
+      var pod = new ExamplePod(
+        document.getElementById('chart'),
+        [
+          { target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first', renderArea: true },
+          { target: 'test2', datapoints: data2, color: 'blue', yOrientation: 'right' },
+          { target: 'test3', datapoints: data3, color: 'orange' },
+        ],
+        options
+      );
+      pod.render();      
+    </script>
+  </body>
+</html>
--- a/example/examplePod.ts
+++ b/example/examplePod.ts
@ -0,0 +1,61 @@
+import {
+  ChartwerkPod,
+  Serie,
+  Options
+} from '../dist/index';
+
+import * as d3 from 'd3';
+import * as _ from 'lodash';
+
+
+class ExamplePod extends ChartwerkPod<Serie, Options> {
+  lineGenerator = null;
+
+  constructor(
+    _el: HTMLElement,
+    _series: Serie[] = [],
+    _options: Options = {},
+  ) {
+    super(_el, _series, _options);
+  }
+
+  override renderMetrics(): void {
+    this.clearAllMetrics();
+    this.initLineGenerator();
+    for(const serie of this.series.visibleSeries) {
+      this.renderLine(serie);
+    }
+  }
+
+  clearAllMetrics(): void {
+    // TODO: temporary hack before it will be implemented in core.
+    this.chartContainer.selectAll('.metric-el').remove();
+  }
+
+  initLineGenerator(): void {
+    this.lineGenerator = d3.line()
+      .x(d => this.state.xScale(d[0]))
+      .y(d => this.state.yScale(d[1]));
+  }
+
+  renderLine(serie: Serie): void {
+    this.metricContainer
+      .append('path')
+      .datum(serie.datapoints)
+      .attr('class', `metric-path-${serie.idx} metric-el ${serie.class}`)
+      .attr('fill', serie.color)
+      .attr('stroke', serie.color)
+      .attr('stroke-width', 1)
+      .attr('stroke-opacity', 0.7)
+      .attr('pointer-events', 'none')
+      .attr('d', this.lineGenerator);
+  }
+
+  onMouseMove(): void {}
+  onMouseOver(): void {}
+  onMouseOut(): void {}
+  renderSharedCrosshair(values): void {}
+  hideSharedCrosshair(): void {}
+}
+
+export { ExamplePod };