New options for line pod

dist/index.d.ts

@@ -43,7 +43,7 @@ export declare class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
     onMouseOut(): void;
     protected zoomOut(): void;
 }
-export declare const VueChartwerkLineChartObject: {
+export declare const VueChartwerkLinePod: {
     render(createElement: any): any;
     mixins: {
         props: {

dist/types.d.ts

@@ -6,6 +6,8 @@ declare type LineTimeSerieParams = {
     renderDots: boolean;
     renderLines: boolean;
     useOutOfRange: boolean;
+    dashArray: string;
+    class: string;
 };
 export declare enum Mode {
     STANDARD = "Standard",

examples/demo.html

@@ -28,7 +28,7 @@
       var pod = new LinePod(
         document.getElementById('chart'),
         [
-          { target: 'test1', datapoints: data1, color: 'green' },
+          { target: 'test1', datapoints: data1, color: 'green', dashArray: '5,3', class: 'first' },
           { target: 'test2', datapoints: data2, color: 'blue' },
           { target: 'test3', datapoints: data3, color: 'orange' },
         ],

package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@chartwerk/line-pod",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@chartwerk/core": {
-      "version": "0.3.3",
+      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.4.tgz",
-      "integrity": "sha512-aauWwYLPeMuLF727twW74GW6Uw2yqPXD8vYuFle/4nN4xjKbjWJvU7/9wlF4xh/azrpOrYWdD4l4SD25u8DzUg=="
+      "integrity": "sha512-dDk+xjcR0XVzTrsQnXlQh6syg41gdn2yh6+q+HPMHwG28+OpFoyRufIPhxzobWp8orINn0PtlfnzgYkfnuSIPg=="
     },
     "@types/d3": {
       "version": "5.16.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chartwerk/line-pod",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "Chartwerk line chart",
   "main": "dist/index.js",
   "scripts": {
@@ -15,7 +15,7 @@
   "author": "CorpGlory",
   "license": "ISC",
   "dependencies": {
-    "@chartwerk/core": "^0.3.3"
+    "@chartwerk/core": "^0.3.4"
   },
   "devDependencies": {
     "@types/d3": "5.16.4",

src/index.ts

@@ -56,7 +56,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
 
   clearAllMetrics(): void {
     // TODO: temporary hack before it will be implemented in core.
-    this.d3.selectAll('.metric-el').remove();
+    this.chartContainer.selectAll('.metric-el').remove();
   }
 
   initLineGenerator(): void {
@@ -101,11 +101,13 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 
   _renderDots(datapoints: number[][], serieIdx: number): void {
+    const customClass = this.series[serieIdx].class || '';
+
     this.metricContainer.selectAll(null)
       .data(datapoints)
       .enter()
       .append('circle')
-      .attr('class', `metric-circle-${serieIdx} metric-el`)
+      .attr('class', `metric-circle-${serieIdx} metric-el ${customClass}`)
       .attr('fill', this.getSerieColor(serieIdx))
       .attr('r', METRIC_CIRCLE_RADIUS)
       .style('pointer-events', 'none')
@@ -114,15 +116,19 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 
   _renderLines(datapoints: number[][], serieIdx: number): void {
+    const dashArray = this.series[serieIdx].dashArray !== undefined ? this.series[serieIdx].dashArray : '0';
+    const customClass = this.series[serieIdx].class || ''
+
     this.metricContainer
       .append('path')
       .datum(datapoints)
-      .attr('class', `metric-path-${serieIdx} metric-el`)
+      .attr('class', `metric-path-${serieIdx} metric-el ${customClass}`)
       .attr('fill', 'none')
       .attr('stroke', this.getSerieColor(serieIdx))
       .attr('stroke-width', 1)
       .attr('stroke-opacity', 0.7)
       .attr('pointer-events', 'none')
+      .style('stroke-dasharray', dashArray)
       .attr('d', this.lineGenerator);
   }
 
@@ -490,14 +496,14 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   }
 }
 
-// it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLineChartObject)
+// it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLinePod)
-export const VueChartwerkLineChartObject = {
+export const VueChartwerkLinePod = {
   // alternative to `template: '<div class="chartwerk-line-pod" :id="id" />'`
   render(createElement) {
     return createElement(
       'div',
       {
-        class: { 'chartwerk-line-chart': true },
+        class: { 'chartwerk-line-pod': true },
         attrs: { id: this.id }
       }
     );

src/types.ts

@@ -7,6 +7,8 @@ type LineTimeSerieParams = {
   renderDots: boolean,
   renderLines: boolean, // TODO: refactor same as scatter-pod
   useOutOfRange: boolean, // It's temporary hack. Need to refactor getValueInterval() method
+  dashArray: string; // dasharray attr, only for lines
+  class: string; // option to add custom class to each serie element
 }
 export enum Mode {
   STANDARD = 'Standard',