g3/src/indicate.js at master · patricksurry/g3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import * as d3 from 'd3';

import { d3sel } from './common.js';
import { stylable, appendable, identity } from './mixin.js';
import { activeController } from './controller.js';
import { pointers } from './pointers.js';


export function indicateText() {
    var format = identity,
        size = 20;

    function text(sel, g) {
        let _ = d3sel(sel).append('text').attr('font-size', size);
        text.stylable(_);
        _ = _.text('');

        if (activeController) {
            function update(v, transition) {    // eslint-disable-line no-unused-vars
                _.text(format(v));
            }
            activeController.register(update, g.metric(), g.unit())
        }
    }
    text.format = function(_) {
        return arguments.length ? (format = _, text) : format;
    }
    text.size = function(_) {
        return arguments.length ? (size = _, text) : size;
    }
    return stylable(text).class('g3-indicate-text');
}


export function indicatePointer() {
    var rescale = identity,
        clamp = [undefined, undefined],
        shape = 'needle';

    function pointer(sel, g) {
        let _ = d3sel(sel).append('g').classed('will-change-transform', true);

        pointer.stylable(_);
        if (!pointer.append().length) {
            pointer.append(pointers[shape]);
        }
        pointer.appendable(_, g);

        if (activeController) {
            function update(v, transition) {
                let z = rescale(v);
                if (typeof(clamp[0]) == 'number') z = Math.max(z, clamp[0]);
                if (typeof(clamp[1]) == 'number') z = Math.min(z, clamp[1]);
                transition(_).attr('transform', g.metrictransform(z));
            }
            activeController.register(update, g.metric(), g.unit())
        }
    }
    pointer.rescale = function(_) {
        return arguments.length ? (rescale = _, pointer) : rescale;
    }
    pointer.clamp = function(_) {
        return arguments.length ? (clamp = _, pointer) : clamp;
    }
    pointer.shape = function(_) {
        if (arguments.length && !(_ in pointers)) throw `pointer: unknown shape ${_}`;
        return arguments.length ? (shape = _, pointer) : shape;
    }
    return stylable(appendable(pointer)).class('g3-indicate-pointer');
}


export function indicateSector() {
    var rescale = identity,
        clamp = [undefined, undefined],
        anchor = 0,
        size = 10,
        inset = 0;

    function sector(sel, g) {
        let _ = d3sel(sel).append('path');

        sector.stylable(_);

        if (activeController) {
            function update(v, transition) {
                let z = rescale(v), z0 = rescale(anchor), negative = v < anchor;
                if (typeof(clamp[0]) == 'number') z = Math.max(z, clamp[0]);
                if (typeof(clamp[1]) == 'number') z = Math.min(z, clamp[1]);
                transition(_)
                    .attr('d', g.sectorpath(negative ? z: z0, negative ? z0: z, size, inset));
                _.classed('g3-indicate-sector-negative', negative);
            }
            activeController.register(update, g.metric(), g.unit());
        }
    }
    sector.rescale = function(_) {
        return arguments.length ? (rescale = _, sector) : rescale;
    }
    sector.clamp = function(_) {
        return arguments.length ? (clamp = _, sector) : clamp;
    }
    sector.anchor = function(_) {
        return arguments.length ? (anchor = _, sector) : anchor;
    }
    sector.size = function(_) {
        return arguments.length ? (size = _, sector) : size;
    }
    sector.inset = function(_) {
        return arguments.length ? (inset = _, sector) : inset;
    }
    return stylable(sector).class('g3-indicate-sector');
}


export function indicateStyle() {
    var styleOn = {opacity: 1},
        styleOff = {opacity: 0},
        trigger = identity;
    function style(sel, g) {
        const tween = d3.interpolate(styleOff, styleOn);
        let _ = d3sel(sel).append('g').attr('class', 'g3-indicate-style');
        style.appendable(_, g);

        if (activeController) {
            function update(v, transition) {    // eslint-disable-line no-unused-vars
                let s = tween(trigger(v));
                // Nb. ignore transition for style updates, looks weird for light on/off
                for (let k in s) _.style(k, s[k]);
            }
            activeController.register(update, g.metric(), g.unit());
        }
    }
    style.styleOn = function(_) {
        return arguments.length ? (styleOn = _, style): styleOn;
    }
    style.styleOff = function(_) {
        return arguments.length ? (styleOff = _, style): styleOff;
    }
    style.trigger = function(_) {
        return arguments.length ? (trigger = _, style): trigger;
    }
    return appendable(style);
}