chartwerk
/
core
4
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity

Compare commits

base: chartwerk:main
Branches Tags
chartwerk:0.6.19
chartwerk:0.6.22
chartwerk:0.6.23
chartwerk:0.6.24
chartwerk:bad-abstract-onmouseclick-#35
chartwerk:broken-demo-#32
chartwerk:charts-background
chartwerk:demopod-build-error-#22
chartwerk:main
chartwerk:onmouseover-event-callback-#42
chartwerk:remove-unused-methods
chartwerk:rename-eventCallbacs-to-events-#26
chartwerk:rename-eventCallbacs-to-events-#26-2
chartwerk:target-master
..
compare: chartwerk:remove-unused-methods
Branches Tags
chartwerk:0.6.19
chartwerk:0.6.22
chartwerk:0.6.23
chartwerk:0.6.24
chartwerk:bad-abstract-onmouseclick-#35
chartwerk:broken-demo-#32
chartwerk:charts-background
chartwerk:demopod-build-error-#22
chartwerk:main
chartwerk:onmouseover-event-callback-#42
chartwerk:remove-unused-methods
chartwerk:rename-eventCallbacs-to-events-#26
chartwerk:rename-eventCallbacs-to-events-#26-2
chartwerk:target-master

No commits in common. 'main' and 'remove-unused-methods' have entirely different histories.
main ... remove-unu

12 changed files with 92 additions and 308 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  1. 40
      build/webpack.demo.conf.js
  2. 5
      demo/README.md
  3. 38
      demo/demo.html
  4. 56
      demo/demo_pod.ts
  5. 5
      package.json
  6. 42
      src/VueChartwerkPodMixin.ts
  7. 79
      src/index.ts
  8. 69
      src/models/options.ts
  9. 3
      src/models/series.ts
  10. 15
      src/models/state.ts
  11. 37
      src/types.ts
  12. 11
      tsconfig.json

40
build/webpack.demo.conf.js
Unescape View File

@ -1,40 +0,0 @@
const path = require('path');
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: resolve('demo'),
entry: './demo_pod.ts',
plugins: [],
devtool: 'inline-source-map',
watch: true,
mode: 'development',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
'css-loader',
],
exclude: /node_modules/
}
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'demo.js',
path: resolve('demo/dist'),
libraryTarget: 'umd',
umdNamedDefine: true
}
};

5
demo/README.md
Unescape View File

@ -1,5 +0,0 @@
### HOW TO RUN
run `yarn run dev` and `yarn run demo` in separate terminals simultaneously.
open `demo.html` in your browser.

38
demo/demo.html
Unescape View File

@ -1,38 +0,0 @@
<!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/demo.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,
axis: {
y: { range: [0, 350] },
x: { format: 'time' }
},
zoomEvents: {
mouse: { zoom: { isActive: false }, pan: { isActive: false } },
scroll: { zoom: { isActive: false } }
},
}
var pod = new DemoPod(
document.getElementById('chart'),
[
{ target: 'test1', datapoints: data1, color: 'green' },
],
options
);
pod.render();
</script>
</body>
</html>

56
demo/demo_pod.ts
Unescape View File

@ -1,56 +0,0 @@
import {
ChartwerkPod,
Serie,
Options
} from '../dist/index';
import * as d3 from 'd3';
import * as _ from 'lodash';
class DemoPod 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-opacity', 0)
.attr('stroke', serie.color)
.attr('stroke-width', 1)
.attr('stroke-opacity', 0.7)
.attr('pointer-events', 'none')
.attr('d', this.lineGenerator);
}
}
export { DemoPod };

5
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "@chartwerk/core",
"version": "0.6.26",
"version": "0.6.17",
"description": "Chartwerk core",
"main": "dist/index.js",
"types": "dist/index.d.ts",
@ -10,12 +10,11 @@
"scripts": {
"build": "webpack --config build/webpack.prod.conf.js",
"dev": "webpack --config build/webpack.dev.conf.js",
"demo": "webpack --config build/webpack.demo.conf.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http://code.corpglory.net/chartwerk/core.git"
"url": "https://gitlab.com/chartwerk/core.git"
},
"author": "CorpGlory Inc.",
"license": "ISC",

42
src/VueChartwerkPodMixin.ts
Unescape View File

@ -39,9 +39,9 @@ export default {
},
methods: {
// it's "abstract" method. "children" components should override it
render() {},
renderSharedCrosshair(values: { x?: number, y?: number }) {},
hideSharedCrosshair() {},
render() { },
renderSharedCrosshair(values: { x?: number, y?: number }) { },
hideSharedCrosshair() { },
onPanningRescale(event) {
this.pod.rescaleMetricAndAxis(event);
},
@ -50,48 +50,41 @@ export default {
this.render();
},
appendEvents() {
if(this.options.events === undefined) {
if(this.options.eventsCallbacks !== undefined) {
this.options.events = this.options.eventsCallbacks
} else {
this.options.events = {};
}
if(this.options.eventsCallbacks === undefined) {
this.options.eventsCallbacks = {}
}
if(has(this.$listeners, 'zoomIn')) {
this.options.events.zoomIn = this.zoomIn.bind(this);
this.options.eventsCallbacks.zoomIn = this.zoomIn.bind(this);
}
if(has(this.$listeners, 'zoomOut')) {
this.options.events.zoomOut = this.zoomOut.bind(this);
}
if(has(this.$listeners, 'mouseOver')) {
this.options.events.mouseOver = this.mouseOver.bind(this);
this.options.eventsCallbacks.zoomOut = this.zoomOut.bind(this);
}
if(has(this.$listeners, 'mouseMove')) {
this.options.events.mouseMove = this.mouseMove.bind(this);
this.options.eventsCallbacks.mouseMove = this.mouseMove.bind(this);
}
if(has(this.$listeners, 'mouseOut')) {
this.options.events.mouseOut = this.mouseOut.bind(this);
this.options.eventsCallbacks.mouseOut = this.mouseOut.bind(this);
}
if(has(this.$listeners, 'onLegendClick')) {
this.options.events.onLegendClick = this.onLegendClick.bind(this);
this.options.eventsCallbacks.onLegendClick = this.onLegendClick.bind(this);
}
if(has(this.$listeners, 'panningEnd')) {
this.options.events.panningEnd = this.panningEnd.bind(this);
this.options.eventsCallbacks.panningEnd = this.panningEnd.bind(this);
}
if(has(this.$listeners, 'panning')) {
this.options.events.panning = this.panning.bind(this);
this.options.eventsCallbacks.panning = this.panning.bind(this);
}
if(has(this.$listeners, 'contextMenu')) {
this.options.events.contextMenu = this.contextMenu.bind(this);
this.options.eventsCallbacks.contextMenu = this.contextMenu.bind(this);
}
if(has(this.$listeners, 'sharedCrosshairMove')) {
this.options.events.sharedCrosshairMove = this.sharedCrosshairMove.bind(this);
this.options.eventsCallbacks.sharedCrosshairMove = this.sharedCrosshairMove.bind(this);
}
if(has(this.$listeners, 'renderStart')) {
this.options.events.renderStart = this.renderStart.bind(this);
this.options.eventsCallbacks.renderStart = this.renderStart.bind(this);
}
if(has(this.$listeners, 'renderEnd')) {
this.options.events.renderEnd = this.renderEnd.bind(this);
this.options.eventsCallbacks.renderEnd = this.renderEnd.bind(this);
}
},
zoomIn(range) {
@ -100,9 +93,6 @@ export default {
zoomOut(centers) {
this.$emit('zoomOut', centers);
},
mouseOver() {
this.$emit('mouseOver');
},
mouseMove(evt) {
this.$emit('mouseMove', evt);
},

79
src/index.ts
Unescape View File

@ -1,4 +1,3 @@
import { AxisRange } from './types';
import VueChartwerkPodMixin from './VueChartwerkPodMixin';
import { Grid } from './components/grid';
@ -31,13 +30,15 @@ import { palette } from './colors';
import * as d3 from 'd3';
import first from 'lodash/first';
import last from 'lodash/last';
import debounce from 'lodash/debounce';
const DEFAULT_TICK_SIZE = 2;
const MILISECONDS_IN_MINUTE = 60 * 1000;
class ChartwerkPod<T extends Serie, O extends Options> {
abstract class ChartwerkPod<T extends Serie, O extends Options> {
protected series: CoreSeries<T>;
protected options: CoreOptions<O>;
@ -79,8 +80,7 @@ class ChartwerkPod<T extends Serie, O extends Options> {
_series: T[] = [],
_options: O
) {
// need to call explicitly because option lazyStyleTag
// in webpack style-loader
// TODO: test if it's necessary
styles.use();
this.options = new CoreOptions(_options);
@ -116,7 +116,6 @@ class ChartwerkPod<T extends Serie, O extends Options> {
this.renderLegend();
this.renderYLabel();
this.renderY1Label();
this.renderXLabel();
this.options.callbackRenderEnd();
@ -153,13 +152,12 @@ class ChartwerkPod<T extends Serie, O extends Options> {
this.series.updateSeries(newSeries);
}
protected renderMetrics(): void {}
protected onMouseOver(): void {}
protected onMouseOut(): void {}
protected onMouseMove(): void {}
protected onMouseClick(): void {}
public renderSharedCrosshair(values: { x?: number, y?: number }): void {}
public hideSharedCrosshair(): void {}
protected abstract renderMetrics(): void;
protected abstract onMouseOver(): void;
protected abstract onMouseOut(): void;
protected abstract onMouseMove(): void;
public abstract renderSharedCrosshair(values: { x?: number, y?: number }): void;
public abstract hideSharedCrosshair(): void;
protected initPodState(): void {
const boxPararms = {
@ -329,21 +327,12 @@ class ChartwerkPod<T extends Serie, O extends Options> {
// TODO: refactor for a new mouse/scroll events
const panKeyEvent = this.options.mousePanEvent.keyEvent;
const isPanActive = this.options.mousePanEvent.isActive;
const isBrushActive = this.options.mouseZoomEvent.isActive;
if(panKeyEvent === KeyEvent.MAIN) {
if(isPanActive) {
this.initPan();
}
if(isBrushActive) {
this.initBrush();
}
if(isPanActive === true && panKeyEvent === KeyEvent.MAIN) {
this.initPan();
this.initBrush();
} else {
if(isBrushActive) {
this.initBrush();
}
if(isPanActive) {
this.initPan();
}
this.initBrush();
this.initPan();
}
this.ensureOverlayExisting();
@ -352,7 +341,6 @@ class ChartwerkPod<T extends Serie, O extends Options> {
.on('mouseover', this.onMouseOver.bind(this))
.on('mouseout', this.onMouseOut.bind(this))
.on('mousemove', this.onMouseMove.bind(this))
.on('click', this.onMouseClick.bind(this))
.on('dblclick', () => {
d3.event.stopPropagation();
// TODO: add the same check as we have in line-pod
@ -384,6 +372,10 @@ class ChartwerkPod<T extends Serie, O extends Options> {
}
protected initBrush(): void {
const isBrushActive = this.options.mouseZoomEvent.isActive;
if(isBrushActive === false) {
return;
}
switch(this.options.mouseZoomEvent.orientation) {
case BrushOrientation.VERTICAL:
this.brush = d3.brushY();
@ -417,9 +409,9 @@ class ChartwerkPod<T extends Serie, O extends Options> {
// TODO: refactor
switch(key) {
case KeyEvent.MAIN:
return () => !d3.event.shiftKey && !d3.event.button;
return () => !d3.event.shiftKey;
case KeyEvent.SHIFT:
return () => d3.event.shiftKey && !d3.event.button;
return () => d3.event.shiftKey;
default:
throw new Error(`Unknown type of KeyEvent: ${key}`);
}
@ -510,8 +502,8 @@ class ChartwerkPod<T extends Serie, O extends Options> {
return;
}
this.chartContainer.append('text')
.attr('y', -this.margin.left)
.attr('x', -(this.height / 2))
.attr('y', 0 - this.margin.left)
.attr('x', 0 - (this.height / 2))
.attr('dy', '1em')
.attr('class', 'y-axis-label')
.attr('transform', 'rotate(-90)')
@ -521,22 +513,6 @@ class ChartwerkPod<T extends Serie, O extends Options> {
.text(this.options.axis.y.label);
}
protected renderY1Label(): void {
if(this.options.axis.y1?.label === undefined) {
return;
}
this.chartContainer.append('text')
.attr('y', -this.width - this.margin.right)
.attr('x', (this.height / 2))
.attr('dy', '1em')
.attr('class', 'y-axis-label')
.attr('transform', 'rotate(90)')
.style('text-anchor', 'middle')
.style('font-size', '14px')
.style('fill', 'currentColor')
.text(this.options.axis.y1.label);
}
protected renderXLabel(): void {
if(this.options.axis.x.label === undefined) {
return;
@ -817,7 +793,8 @@ class ChartwerkPod<T extends Serie, O extends Options> {
this.state.yValueRange = yRange;
this.brushStartSelection = null;
}
this.zoomIn([xRange, yRange]);
this.options.callbackZoomIn([xRange, yRange]);
}
protected zoomOut(): void {
@ -830,10 +807,6 @@ class ChartwerkPod<T extends Serie, O extends Options> {
this.options.callbackZoomOut(centers);
}
protected zoomIn(ranges: AxisRange[]): void {
this.options.callbackZoomIn(ranges);
}
getAxisTicksFormatter(axisOptions: AxisOption): (d: any, i: number) => any {
// TODO: ticksCount === 0 -> suspicious option
if(axisOptions.ticksCount === 0) {

69
src/models/options.ts
Unescape View File

@ -90,6 +90,7 @@ export const CORE_DEFAULT_OPTIONS: Options = {
crosshair: DEFAULT_CROSSHAIR_OPTIONS,
renderLegend: true,
margin: DEFAULT_MARGIN,
eventsCallbacks: {},
}
export class CoreOptions<O extends Options> {
@ -105,14 +106,6 @@ export class CoreOptions<O extends Options> {
protected setOptions(options: O): void {
this._options = lodashDefaultsDeep(lodashCloneDeep(options), this.getDefaults());
if(this._options.eventsCallbacks !== undefined) {
if(this._options.events !== undefined) {
throw new Error('events and eventsCallbacks are mutually exclusive');
}
this._options.events = this._options.eventsCallbacks;
}
// also bakward compatibility for clients who use "eventsCallbacks" instead of "events"
this._options.eventsCallbacks = this._options.events;
}
// this getter can be overrited in Pod
@ -167,86 +160,74 @@ export class CoreOptions<O extends Options> {
// event callbacks
callbackRenderStart(): void {
if(has(this._options.events, 'renderStart')) {
this._options.events.renderStart();
if(has(this._options.eventsCallbacks, 'renderStart')) {
this._options.eventsCallbacks.renderStart();
}
}
callbackRenderEnd(): void {
if(has(this._options.events, 'renderEnd')) {
this._options.events.renderEnd();
if(has(this._options.eventsCallbacks, 'renderEnd')) {
this._options.eventsCallbacks.renderEnd();
}
}
callbackComponentRenderEnd(part: RenderComponent): void {
if(has(this._options.events, 'componentRenderEnd')) {
this._options.events.componentRenderEnd(part);
if(has(this._options.eventsCallbacks, 'componentRenderEnd')) {
this._options.eventsCallbacks.componentRenderEnd(part);
}
}
callbackLegendClick(idx: number): void {
if(has(this._options.events, 'onLegendClick')) {
this._options.events.onLegendClick(idx);
if(has(this._options.eventsCallbacks, 'onLegendClick')) {
this._options.eventsCallbacks.onLegendClick(idx);
}
}
callbackLegendLabelClick(idx: number): void {
if(has(this._options.events, 'onLegendLabelClick')) {
this._options.events.onLegendLabelClick(idx);
if(has(this._options.eventsCallbacks, 'onLegendLabelClick')) {
this._options.eventsCallbacks.onLegendLabelClick(idx);
}
}
callbackPanning(event: { ranges: AxisRange[], d3Event: any }): void {
if(has(this._options.events, 'panning')) {
this._options.events.panning(event);
if(has(this._options.eventsCallbacks, 'panning')) {
this._options.eventsCallbacks.panning(event);
}
}
callbackPanningEnd(ranges: AxisRange[]): void {
if(has(this._options.events, 'panningEnd')) {
this._options.events.panningEnd(ranges);
if(has(this._options.eventsCallbacks, 'panningEnd')) {
this._options.eventsCallbacks.panningEnd(ranges);
}
}
callbackZoomIn(ranges: AxisRange[]): void {
if(has(this._options.events, 'zoomIn')) {
this._options.events.zoomIn(ranges);
if(has(this._options.eventsCallbacks, 'zoomIn')) {
this._options.eventsCallbacks.zoomIn(ranges);
}
}
callbackZoomOut(centers: { x: number, y: number }): void {
if(has(this._options.events, 'zoomOut')) {
this._options.events.zoomOut(centers);
if(has(this._options.eventsCallbacks, 'zoomOut')) {
this._options.eventsCallbacks.zoomOut(centers);
}
}
callbackSharedCrosshairMove(event: { datapoints, eventX, eventY }): void {
if(has(this._options.events, 'sharedCrosshairMove')) {
this._options.events.sharedCrosshairMove(event);
}
}
callbackMouseOver(): void {
if(has(this._options.events, 'mouseOver')) {
this._options.events.mouseOver();
if(has(this._options.eventsCallbacks, 'sharedCrosshairMove')) {
this._options.eventsCallbacks.sharedCrosshairMove(event);
}
}
callbackMouseMove(event): void {
if(has(this._options.events, 'mouseMove')) {
this._options.events.mouseMove(event);
if(has(this._options.eventsCallbacks, 'mouseMove')) {
this._options.eventsCallbacks.mouseMove(event);
}
}
callbackMouseOut(): void {
if(has(this._options.events, 'mouseOut')) {
this._options.events.mouseOut();
}
}
callbackMouseClick(event): void {
if(has(this._options.events, 'mouseClick')) {
this._options.events.mouseClick(event);
if(has(this._options.eventsCallbacks, 'mouseOut')) {
this._options.eventsCallbacks.mouseOut();
}
}
}

3
src/models/series.ts
Unescape View File

@ -35,7 +35,6 @@ export class CoreSeries<T extends Serie> {
_series: Array<T> = [];
constructor(series: T[], private _podDefaults?: Partial<T>) {
// TODO: create separate Serie class, and store instances in this._series
this.setSeries(series);
}
@ -84,7 +83,7 @@ export class CoreSeries<T extends Serie> {
get isSeriesAvailable(): boolean {
if(this.visibleSeries.length > 0) {
const seriesEmptiness = lodashMap(this.visibleSeries, this._isSerieEmpty.bind(this));
return lodashIncludes(seriesEmptiness, false);
}
return false;

15
src/models/state.ts
Unescape View File

@ -1,4 +1,4 @@
import { Serie, Options, yAxisOrientation } from '../types';
import { Serie, Options } from '../types';
import { CoreSeries } from './series';
import { CoreOptions } from './options';
@ -89,15 +89,6 @@ export class PodState<T extends Serie, O extends Options> {
this._transform = { x: 0, y: 0, k: 1 };
}
getYScaleByOrientation(orientation?: yAxisOrientation): d3.ScaleLinear<number, number> {
// TODO: we set defaults in Series class, so we don't expect `undefined` here
// we can remove this check when we implement Serie class (see TODO in `series.ts`)
if(orientation === undefined) {
return this._yScale;
}
return orientation === yAxisOrientation.LEFT ? this._yScale : this._y1Scale;
}
get yScale(): d3.ScaleLinear<number, number> {
return this._yScale;
}
@ -196,7 +187,7 @@ export class PodState<T extends Serie, O extends Options> {
if(this.coreOptions.axis.y1.range !== undefined) {
return min(this.coreOptions.axis.y1.range);
}
return this.coreSeries.minValueY1;
return this.coreSeries.minValueY;
}
public getMaxValueY1(): number {
@ -206,7 +197,7 @@ export class PodState<T extends Serie, O extends Options> {
if(this.coreOptions.axis.y1.range !== undefined) {
return max(this.coreOptions.axis.y1.range);
}
return this.coreSeries.maxValueY1;
return this.coreSeries.maxValueY;
}
// getters for correct transform

37
src/types.ts
Unescape View File

@ -14,30 +14,23 @@ export type Serie = {
yOrientation?: yAxisOrientation,
};
// TODO: move some options to line-chart
export type Events = {
zoomIn?: (range: AxisRange[]) => void,
panning?: (event: { ranges: AxisRange[], d3Event: any }) => void,
panningEnd?: (range: AxisRange[]) => void,
zoomOut?: (centers: {x: number, y: number}) => void,
mouseOver?: () => void,
mouseMove?: (evt: any) => void,
mouseClick?: (evt: any) => void,
mouseOut?: () => void,
onLegendClick?: (idx: number) => void,
onLegendLabelClick?: (idx: number) => void,
contextMenu?: (evt: any) => void, // the same name as in d3.events
sharedCrosshairMove?: (event: any) => void,
renderStart?: () => void,
renderEnd?: () => void,
componentRenderEnd?: (part: RenderComponent) => void,
}
export type Options = {
margin?: Margin;
// obsolete property, use events instead
eventsCallbacks?: Events;
events?: Events;
eventsCallbacks?: {
zoomIn?: (range: AxisRange[]) => void,
panning?: (event: { ranges: AxisRange[], d3Event: any }) => void,
panningEnd?: (range: AxisRange[]) => void,
zoomOut?: (centers: {x: number, y: number}) => void,
mouseMove?: (evt: any) => void,
mouseOut?: () => void,
onLegendClick?: (idx: number) => void,
onLegendLabelClick?: (idx: number) => void,
contextMenu?: (evt: any) => void, // the same name as in d3.events
sharedCrosshairMove?: (event: any) => void,
renderStart?: () => void,
renderEnd?: () => void,
componentRenderEnd?: (part: RenderComponent) => void,
};
axis?: AxesOptions;
grid?: GridOptions;
crosshair?: CrosshairOptions;

11
tsconfig.json
Unescape View File

@ -1,6 +1,7 @@
{
"compilerOptions": {
"target": "es5",
"rootDir": "./src",
"module": "esnext",
"declaration": true,
"declarationDir": "dist",
@ -15,11 +16,7 @@
"noImplicitUseStrict": false,
"noImplicitAny": false,
"noUnusedLocals": false,
"moduleResolution": "node",
},
"exclude": [
"node_modules",
"dist",
"demo"
]
"baseUrl": "./src",
"moduleResolution": "node"
}
}

Write Preview
Loading…
Cancel
Save