something is rendered

3 years ago · 93c7c58faa
4 changed files with 79 additions and 24 deletions
--- a/examples/01-basic.html
+++ b/examples/01-basic.html
@ -7,15 +7,23 @@
    <script src="../dist/index.js" type="text/javascript"></script>
  </head>
  <body>
-
-    hello
    <div id="chart" style="width: 500px; height: 500px;"></div>

    <script type="text/javascript">
      var pod = new ChartwerkGaugePod(
        document.getElementById('chart'),
-        [{ target: 'test', datapoints: [[90, 5], [0, 10], [45, 15], [180, 20], [270, 25]], radius: 30 }],
-        { usePanning: false, renderLegend: false, renderYaxis: false, renderXaxis: false, renderGrid: false }
+        [{ target: 'test', datapoints: [[90, 5], [0, 10], [45, 15], [180, 20], [270, 25]] }],
+        { 
+          usePanning: false, 
+          renderLegend: false, 
+          renderYaxis: false, 
+          renderXaxis: false, 
+          renderGrid: false, 
+          zoom: {
+            type: 'none'
+          },
+          radius: 30 
+        }
      );
      pod.render();
    </script>
--- a/package.json
+++ b/package.json
@ -11,7 +11,7 @@
  "author": "CorpGlory",
  "license": "Apache-2.0",
  "dependencies": {
-    "@chartwerk/base": "github:chartwerk/base"
+    "@chartwerk/base": "github:chartwerk/base#9d7346ef46a1fd32d694187c3eb6f26cb87dd1b6"
  },
  "devDependencies": {
    "@types/d3": "^5.7.2",
--- a/src/index.ts
+++ b/src/index.ts
@ -1,35 +1,82 @@
-import { ChartwerkBase, VueChartwerkBaseMixin, TickOrientation, TimeFormat, AxisFormat } from '@chartwerk/base';
+import { ChartwerkPod, VueChartwerkPodMixin } from '@chartwerk/base';

 import * as d3 from 'd3';




-export class ChartwerkGaugePod extends ChartwerkBase<any, any> {
+export class ChartwerkGaugePod extends ChartwerkPod<any, any> {
+  gaugeCenter = '';

-  // TODO: define the type better
-  private _dValue: d3.Selection<SVGTextElement, unknown, null, undefined>;
+  // it will be options
+  colors = ['green', 'yellow', 'red'];
+  stops = [10, 30];
+  value = 40;

  constructor(el: HTMLElement, _series: any[] = [], _options: any = {}) {
    super(d3, el, _series, _options);
-    this._init();
  }

-
-  private _init() {
-    this._initValueText();
+  get valueRange(): number[] {
+    if(this.stops.length < 2) {
+      return this.stops;
+    }
+    let range = [this.stops[0]];
+    for(let i = 1; i < this.stops.length; i++) {
+      range.push(this.stops[i]-this.stops[i-1]);
+    }
+    return range;
  }

-  private _initValueText(): void {
-    this._dValue = this._chartContainer
-      .append('text')
-      .text('hey you')
-      .attr('fill', 'black');
+  renderLine(): void {
+    let scale = d3.scaleLinear().domain([0, this.maxValue]).range([0, 180]);
+    this.chartContainer.selectAll('.needle').data([this.value])
+      .transition()
+      .ease(d3.easeElasticOut)
+      .duration(1000)
+      .attr('transform', (d: number) => {
+        return this.gaugeCenter + 'rotate(' + scale(d) + ')'
+      });
  }

-
-  _renderMetrics(): void {
-    
+  renderMetrics(): void {
+    this.gaugeCenter = `translate(${this.width / 2},${this.height - 10})`;
+
+    let arc = d3.arc()
+      .innerRadius(50)
+      .outerRadius(80)
+      .padAngle(0);
+
+    let pie = d3.pie()
+      .startAngle((-1 * Math.PI) / 2)
+      .endAngle(Math.PI / 2)
+
+    let arcs = pie(this.valueRange);
+    let background = this.chartContainer.selectAll('path')
+      .data(arcs)
+      .enter()
+      .append('path')
+      .style('fill', (d: object, i: number) => {
+        return this.colors[i];
+      })
+      .attr('d', arc as any)
+      .attr('transform', this.gaugeCenter)
+
+    let needle = this.chartContainer.selectAll('.needle')
+      .data([0])
+      .enter()
+      .append('line')
+      .attr('x1', 0)
+      .attr('x2', -80)
+      .attr('y1', 0)
+      .attr('y2', 0)
+      .classed('needle', true)
+      .style('stroke', 'black')
+      .attr('transform', (d: number) => {
+        return this.gaugeCenter + 'rotate(' + d + ')'
+      });
+
+    this.renderLine();
  }


@ -53,7 +100,7 @@ export const VueChartwerkGaugePodObject = {
      }
    )
  },
-  mixins: [VueChartwerkBaseMixin],
+  mixins: [VueChartwerkPodMixin],
  methods: {
    render() {
      const pod = new ChartwerkGaugePod(document.getElementById(this.id), this.series, this.options);
--- a/yarn.lock
+++ b/yarn.lock
@ -2,9 +2,9 @@
 # yarn lockfile v1


-"@chartwerk/base@github:chartwerk/base":
+"@chartwerk/base@github:chartwerk/base#9d7346ef46a1fd32d694187c3eb6f26cb87dd1b6":
  version "0.2.4"
-  resolved "https://codeload.github.com/chartwerk/base/tar.gz/4351db8d68acd3d527cbd6e56d3fa1bb22f25f3c"
+  resolved "https://codeload.github.com/chartwerk/base/tar.gz/9d7346ef46a1fd32d694187c3eb6f26cb87dd1b6"

 "@types/d3-array@^1":
  version "1.2.8"