Browse Source

continue the bascis

merge-requests/1/merge
Coin de Gamma 4 years ago
parent
commit
173dade277
  1. 23
      examples/01-basic.html
  2. 32
      src/index.ts
  3. 0
      src/types.ts

23
examples/01-basic.html

@ -0,0 +1,23 @@
<!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.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 }
);
pod.render();
</script>
</body>
</html>

32
src/index.ts

@ -1,32 +1,42 @@
import { ChartwerkBase, VueChartwerkBaseMixin, TickOrientation, TimeFormat, AxisFormat } from '@chartwerk/base';
import * as d3 from 'd3';
import * as _ from 'lodash';
export class ChartwerkGaugePod extends ChartwerkBase<any, any> {
_metricsContainer: any;
// TODO: define the type better
private _dValue: d3.Selection<SVGTextElement, unknown, null, undefined>;
constructor(el: HTMLElement, _series: any[] = [], _options: any = {}) {
super(d3, el, _series, _options);
this._init();
}
_renderMetrics(): void {
}
onMouseOver(): void {
// TODO: add
private _init() {
this._initValueText();
}
onMouseMove(): void {
// TODO: add
private _initValueText(): void {
this._dValue = this._chartContainer
.append('text')
.text('hey you')
.attr('fill', 'black');
}
onMouseOut(): void {
// TODO: add
_renderMetrics(): void {
}
/* handlers and overloads */
onMouseOver(): void {}
onMouseMove(): void {}
onMouseOut(): void { }
renderSharedCrosshair(): void {}
hideSharedCrosshair(): void {}
}

0
src/types.ts

Loading…
Cancel
Save