| 3 | dev.spec(getSpec()); |
| 4 | |
| 5 | function updateSpecPlugin() { |
| 6 | return { |
| 7 | init: function (chart) { |
| 8 | const node = document.createElement('div'); |
| 9 | const root = d3.select(node); |
| 10 | root.append('span').append('strong') |
| 11 | .text('JSON:'); |
| 12 | root.append('textarea') |
| 13 | .property('value', '{}'); |
| 14 | root.append('button') |
| 15 | .text('Set data') |
| 16 | .on('click', function () { |
| 17 | const spec = getSpec(); |
| 18 | const text = root.select('textarea').property('value'); |
| 19 | const obj = JSON.parse(text || '{}'); |
| 20 | if (obj.plugins && !Array.isArray(obj.plugins)) { |
| 21 | obj.plugins = Object.keys(obj.plugins).reduce(function (plugins, name) { |
| 22 | plugins.push(Taucharts.api.plugins.get(name)(obj.plugins[name])); |
| 23 | return plugins; |
| 24 | }, []); |
| 25 | obj.plugins.push(updateSpecPlugin()); |
| 26 | } |
| 27 | const chartSpec = Object.assign(spec, obj); |
| 28 | chart.updateConfig(Object.assign(spec, obj)); |
| 29 | }); |
| 30 | chart.insertToHeader(node); |
| 31 | this.node = node; |
| 32 | }, |
| 33 | destroy: function () { |
| 34 | this.node.parentElement.removeChild(this.node); |
| 35 | } |
| 36 | }; |
| 37 | } |
| 38 | |
| 39 | function getSpec() { |
| 40 | return { |