forked from electricitymaps/electricitymaps-contrib
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add react * Fix bindings * Fix
- Loading branch information
Showing
21 changed files
with
2,071 additions
and
2,742 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,41 @@ | ||
| { | ||
| "extends": "airbnb", | ||
| "env": { | ||
| "browser": true | ||
| }, | ||
| "rules": { | ||
| "no-underscore-dangle": "off", | ||
| "class-methods-use-this": "off", | ||
| "linebreak-style": "off" | ||
| "extends": "airbnb", | ||
| "env": { | ||
| "browser": true, | ||
| }, | ||
| "rules": { | ||
| "comma-dangle": ["error", { | ||
| "arrays": "always-multiline", | ||
| "objects": "always-multiline", | ||
| "imports": "always-multiline", | ||
| "exports": "always-multiline", | ||
| "functions": "ignore" | ||
| }], | ||
| "brace-style": "warn", | ||
| "class-methods-use-this": "warn", | ||
| "dot-notation": "warn", | ||
| "implicit-arrow-linebreak": "off", | ||
| "import/prefer-default-export": "off", | ||
| "max-len": "warn", | ||
| "no-await-in-loop": "warn", | ||
| "no-continue": "warn", | ||
| "no-nested-ternary": "warn", | ||
| "no-param-reassign": ["error", { "props": false }], | ||
| "no-trailing-spaces": "warn", | ||
| "no-underscore-dangle": "warn", | ||
| "no-unused-vars": "warn", | ||
| "react/destructuring-assignment": "warn", | ||
| "quote-props": "warn", | ||
| "react/jsx-one-expression-per-line": "warn", | ||
| "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }], | ||
| "react/prop-types": "warn", | ||
| "react/sort-comp": "warn" | ||
| }, | ||
| "settings": { | ||
| "import/resolver": { | ||
| "node": { | ||
| "extensions": [".js", ".jsx", ".json"] | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,115 +1,86 @@ | ||
| const d3 = Object.assign( | ||
| {}, | ||
| require('d3-selection'), | ||
| require('d3-transition'), | ||
| require('d3-shape'), | ||
| require('d3-interpolate'), | ||
| ); | ||
| import React from 'react'; | ||
|
|
||
| export default class CircularGauge { | ||
| constructor(selectorId, argConfig) { | ||
| const config = argConfig || {}; | ||
| import * as d3Selection from 'd3-selection'; | ||
| import * as d3Transition from 'd3-transition'; | ||
| import * as d3Shape from 'd3-shape'; | ||
| import * as d3Interpolate from 'd3-interpolate'; | ||
|
|
||
| this.radius = config.radius || '32'; | ||
| this.lineWidth = config.lineWidth || '6'; | ||
| this.fontSize = config.fontSize || '1rem'; | ||
| const d3 = { | ||
| ...d3Selection, | ||
| ...d3Transition, | ||
| ...d3Shape, | ||
| ...d3Interpolate, | ||
| }; | ||
|
|
||
| this.arc = d3.arc() | ||
| .startAngle(0) | ||
| .innerRadius(this.radius - this.lineWidth) | ||
| .outerRadius(this.radius); | ||
|
|
||
| this.prevPercentage = 0; | ||
|
|
||
| this.percentage = config.percentage || null; | ||
|
|
||
| // main gauge component | ||
| const DEFAULT_RADIUS = '32'; | ||
|
|
||
| const gauge = d3.select(`#${selectorId}`).append('svg') | ||
| .attr('width', this.radius * 2) | ||
| .attr('height', this.radius * 2) | ||
| // .attr("width", '100%') // makes gauge auto-resize | ||
| // .attr("height", '100%') // makes gauge auto-resize | ||
| // .attr("viewBox", "0 0 " + (this.radius * 2) + " " + (this.radius * 2)) // makes resizable | ||
| // .attr("preserveAspectRatio", "xMidYMid meet") // makes gauge resizable | ||
| .append('g') | ||
| .attr('transform', `translate(${this.radius},${this.radius})`) | ||
| .append('g') | ||
| .attr('class', 'circular-gauge'); | ||
| export default class extends React.PureComponent { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| // background | ||
| this.background = gauge.append('path') | ||
| .attr('class', 'background') | ||
| .attr('d', this.arc.endAngle(2 * Math.PI)); | ||
| this.foregroundRef = React.createRef(); | ||
|
|
||
| // foreground | ||
| this.foreground = gauge.append('path') | ||
| .attr('class', 'foreground') | ||
| .attr('d', this.arc.endAngle(0)); // starts filling from 0 | ||
| this.state = { | ||
| prevPercentage: 0, | ||
| }; | ||
|
|
||
| this.percentageText = gauge.append('text') | ||
| .style('text-anchor', 'middle') | ||
| .attr('dy', '0.4em') | ||
| .style('font-weight', 'bold') | ||
| .style('font-size', this.fontSize) | ||
| .text(this.percentage != null ? `${Math.round(this.percentage)}%` : '?'); | ||
| const radius = this.props.radius || DEFAULT_RADIUS; | ||
| const lineWidth = this.props.lineWidth || '6'; | ||
|
|
||
| const that = this; | ||
|
|
||
| d3.select(`#${selectorId}`) | ||
| .on('mouseover', function (d) { | ||
| if (that.onGaugeMouseOver) that.onGaugeMouseOver(this); | ||
| }) | ||
| .on('mouseout', function (d) { | ||
| if (that.onGaugeMouseOut) that.onGaugeMouseOut(this); | ||
| }) | ||
| .on('mousemove', function (d) { | ||
| if (that.onGaugeMouseMove) that.onGaugeMouseMove(this); | ||
| }); | ||
|
|
||
| this.draw(); | ||
| this.arc = d3.arc() | ||
| .startAngle(0) | ||
| .innerRadius(radius - lineWidth) | ||
| .outerRadius(radius); | ||
| } | ||
|
|
||
| draw() { | ||
| const arc = this.arc; | ||
| const prevPercentage = this.prevPercentage != null ? this.prevPercentage / 100 : 0; | ||
| const percentage = this.percentage != null ? this.percentage / 100 : 0; | ||
|
|
||
| const i = d3.interpolate(prevPercentage * 2 * Math.PI, 2 * Math.PI * (percentage)); | ||
|
|
||
| this.foreground.transition() | ||
| render() { | ||
| const fontSize = this.props.fontSize || '1rem'; | ||
| const radius = this.props.radius || DEFAULT_RADIUS; | ||
| const percentage = Number.isNaN(this.props.percentage) | ||
| ? 0 | ||
| : (this.props.percentage || 0); | ||
|
|
||
| const i = d3.interpolate( | ||
| (this.state.prevPercentage / 100) * 2 * Math.PI, | ||
| (percentage / 100) * 2 * Math.PI | ||
| ); | ||
| d3.select(this.foregroundRef.current) | ||
| .transition() | ||
| .duration(500) | ||
| .attrTween( | ||
| 'd', | ||
| () => t => arc.endAngle(i(t))(), | ||
| ); | ||
| } | ||
|
|
||
| onMouseOver(tooltip) { | ||
| this.onGaugeMouseOver = tooltip; | ||
| return this; | ||
| } | ||
|
|
||
| onMouseMove(tooltip) { | ||
| this.onGaugeMouseMove = tooltip; | ||
| return this; | ||
| } | ||
|
|
||
| onMouseOut(tooltip) { | ||
| this.onGaugeMouseOut = tooltip; | ||
| return this; | ||
| } | ||
|
|
||
| setPercentage(percentage) { | ||
| if (this.percentage === percentage) { | ||
| return; | ||
| } | ||
| if (Number.isNaN(percentage)) { | ||
| return; | ||
| } | ||
| this.prevPercentage = this.percentage; | ||
| this.percentage = percentage; | ||
| this.percentageText.text(this.percentage != null ? `${Math.round(this.percentage)}%` : '?'); | ||
| this.draw(); | ||
| () => t => this.arc.endAngle(i(t))(), | ||
| ) | ||
| .on('end', () => this.setState({ prevPercentage: percentage })); | ||
|
|
||
| const { onMouseMove, onMouseOut, onMouseOver } = this.props; | ||
|
|
||
| return ( | ||
| <div | ||
| onMouseOver={() => onMouseOver && onMouseOver()} | ||
| onMouseOut={() => onMouseOut && onMouseOut()} | ||
| onMouseMove={e => onMouseMove && onMouseMove(e.clientX, e.clientY)} | ||
| > | ||
| <svg width={radius * 2} height={radius * 2}> | ||
| <g transform={`translate(${radius},${radius})`}> | ||
| <g className="circular-gauge"> | ||
| <path className="background" d={this.arc.endAngle(2 * Math.PI)()} /> | ||
| <path | ||
| className="foreground" | ||
| d={this.arc.endAngle((this.state.prevPercentage / 100) * 2 * Math.PI)()} | ||
| ref={this.foregroundRef} | ||
| /> | ||
| <text style={{ textAnchor: 'middle', fontWeight: 'bold', fontSize }} dy="0.4em"> | ||
| { | ||
| this.props.percentage != null && !Number.isNaN(this.props.percentage) | ||
| ? `${Math.round(percentage)}%` | ||
| : '?' | ||
| } | ||
| </text> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -207,4 +207,4 @@ class ExchangeLayer { | |
| } | ||
| } | ||
|
|
||
| module.exports = ExchangeLayer; | ||
| export default ExchangeLayer; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -170,4 +170,4 @@ class WindLayer { | |
| } | ||
| } | ||
|
|
||
| module.exports = WindLayer; | ||
| export default WindLayer; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -77,4 +77,4 @@ Tooltip.prototype.hide = function() { | |
| return this; | ||
| } | ||
|
|
||
| module.exports = Tooltip | ||
| export default Tooltip | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| export function getCurrentZoneData(state) { | ||
| const { grid } = state.data; | ||
| const zoneName = state.application.selectedZoneName; | ||
| const i = state.application.selectedZoneTimeIndex; | ||
| if (!grid || !zoneName) { | ||
| return null; | ||
| } | ||
| if (i == null) { | ||
| return grid.zones[zoneName]; | ||
| } | ||
| return (state.data.histories[zoneName] || {})[i]; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.