Skip to content

Commit

Permalink
#27 removed duplicated dimensions for charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@PiotrKedra
PiotrKedra committed Apr 8, 2020
1 parent 74c0b07 commit 3948afc
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 126 deletions.
24 changes: 21 additions & 3 deletions src/main/weather/charts/HourlyChartService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,28 @@ import UvIndexChart from "./uvindex/UvIndexChart";
function HourlyTemperatureChart(props){
let i = 0;
return parseHourlyForecast(props.hourlyForecast).map(hourlyForecastPerDay =>
<TemperatureChart key={i++} data={hourlyForecastPerDay}/>)
<TemperatureChart key={i++}
data={hourlyForecastPerDay}
dimensions={getDimensions(hourlyForecastPerDay.length)}
/>)
}

function HourlyRainfallChart(props){
let i = 0;
return parseHourlyForecast(props.hourlyForecast).map(hourlyForecastPerDay =>
<RainfallChart key={i++} data={hourlyForecastPerDay}/>)
<RainfallChart key={i++}
data={hourlyForecastPerDay}
dimensions={getDimensions(hourlyForecastPerDay.length)}
/>)
}

function HourlyUvIndexChart(props){
let i = 0;
return parseHourlyForecast(props.hourlyForecast).map(hourlyForecastPerDay =>
<UvIndexChart key={i++} data={hourlyForecastPerDay}/>)
<UvIndexChart key={i++}
data={hourlyForecastPerDay}
dimensions={getDimensions(hourlyForecastPerDay.length)}
/>)
}

//todo mb keep this in state instead of 'hourlyForecast'
Expand All @@ -43,6 +52,15 @@ function parseHourlyForecast(hourlyForecast) {
return hourlyForecastByDailyDate;
}

function getDimensions(elementLength, graphHeight=70) {
return {
svgWidth: 80 * elementLength,
svgHeight: 240,
graphHeight: graphHeight,
initialYCordOfChart: 60,
}
}

export {
HourlyTemperatureChart,
HourlyRainfallChart,
Expand Down
71 changes: 30 additions & 41 deletions src/main/weather/charts/rainfall/RainfallChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,125 +5,114 @@ import IMAGES from "../../../../resource/ImagePath";
import mapDataToIcon from "../common/ForecastIconMapper";


let SVG_WIDTH = 600;
const SVG_HEIGHT = 240;
const GRAPH_HEIGHT = 70;
const START_Y_POSITION_OF_GRAPH = 60;
const GRAPH_TRANSFORMATION = -1;

const DEGREE_SIGN = '°';
const GRADIENT_ID = 'grad';

const COLORS = {
mainText: '#111',
pathBlue: '#5BC3CE',
gridColor: 'rgba(81,81,81,0.3)',
gradientLight: '#FFF'
};


class RainfallChart extends React.PureComponent {

render() {
SVG_WIDTH = 80 * this.props.data.length;
render = () => {

const data = this.props.data;
const minValue = d3.min(data, d => d.precipIntensity);
const maxValue = d3.max(data, d => d.precipIntensity);
console.log(data);
const xFunction = this.getFunctionX(data);
const yFunction = this.getFunctionY(minValue, maxValue);
const xFunction = this.getFunctionX(data, this.props.dimensions.svgWidth);
const yFunction = this.getFunctionY(minValue, maxValue, this.props.dimensions.graphHeight, this.props.dimensions.initialYCordOfChart);

return (
<Svg width={SVG_WIDTH} height={SVG_HEIGHT}>
<G y={SVG_HEIGHT}>
<Svg width={this.props.dimensions.svgWidth} height={this.props.dimensions.svgHeight}>
<G y={this.props.dimensions.svgHeight}>

{/* grid lines */}
{this.generateVerticalBeginLine()}
{this.generateFullLengthLine(-START_Y_POSITION_OF_GRAPH - GRAPH_HEIGHT)}
{this.generateFullLengthLine(-START_Y_POSITION_OF_GRAPH - GRAPH_HEIGHT / 2, 50)}
{this.generateFullLengthLine(-START_Y_POSITION_OF_GRAPH)}
{this.generateVerticalGridLines(data, xFunction)}
{this.generateVerticalBeginLine(this.props.dimensions.svgHeight)}
{this.generateFullLengthLine(-this.props.dimensions.initialYCordOfChart - this.props.dimensions.graphHeight, this.props.dimensions.svgWidth)}
{this.generateFullLengthLine(-this.props.dimensions.initialYCordOfChart - this.props.dimensions.graphHeight / 2, this.props.dimensions.svgWidth, 50)}
{this.generateFullLengthLine(-this.props.dimensions.initialYCordOfChart, this.props.dimensions.svgWidth)}
{this.generateVerticalGridLines(data, xFunction, this.props.dimensions.graphHeight, this.props.dimensions.initialYCordOfChart)}

{/* day date text */}
{this.generateDateText(data)}
{this.generateDateText(data, this.props.dimensions.svgHeight)}

{/* forecast images*/}
{this.generateForecastImageForEach(data, xFunction)}
{this.generateForecastImageForEach(data, xFunction, this.props.dimensions.graphHeight, this.props.dimensions.initialYCordOfChart)}
{this.generateRainfallImageForEach(data, xFunction)}

{/* data values ( text for: hour, temperature, rainfall % ) */}
{this.generateDegreeTextForEachItem(data, xFunction, yFunction)}
{this.generateTextForEachItem(data, 'precipProbability', xFunction, 8, -20, 14)}
{this.generateTextForEachItem(data, 'time', xFunction, 0, (START_Y_POSITION_OF_GRAPH + GRAPH_HEIGHT) * GRAPH_TRANSFORMATION - 70, 20)}
{this.generateTextForEachItem(data, 'time', xFunction, 0, (this.props.dimensions.initialYCordOfChart + this.props.dimensions.graphHeight) * -1 - 70, 20)}
</G>
</Svg>
);
}
};

getFunctionX(data) {
getFunctionX(data, svgWidth) {
const xDomain = data.map(item => item.time);
const xRange = [0, SVG_WIDTH];
const xRange = [0, svgWidth];
return d3
.scalePoint()
.domain(xDomain)
.range(xRange)
.padding(1);
}

getFunctionY(minValue, maxValue) {
getFunctionY(minValue, maxValue, graphHeight, initialYCordOfChart) {
const yDomain = [minValue, maxValue];
const yRange = [START_Y_POSITION_OF_GRAPH, START_Y_POSITION_OF_GRAPH + GRAPH_HEIGHT];
const yRange = [initialYCordOfChart, initialYCordOfChart + graphHeight];
return d3
.scaleLinear()
.domain(yDomain)
.range(yRange);
}

generateVerticalBeginLine() {
generateVerticalBeginLine(svgHeight) {
return <Line
x1={10}
y1={-20}
x2={10}
y2={-SVG_HEIGHT}
y2={-svgHeight}
stroke={COLORS.gridColor}
strokeDasharray={[3, 3]}
strokeWidth="0.5"
/>;
}

generateFullLengthLine(y, xPadding = 0) {
generateFullLengthLine(y, svgWidth, xPadding = 0 ) {
return <Line
x1={10 + xPadding}
y1={y}
x2={SVG_WIDTH - xPadding}
x2={svgWidth - xPadding}
y2={y}
stroke={COLORS.gridColor}
strokeDasharray={[3, 3]}
strokeWidth="0.5"
/>;
}

generateVerticalGridLines(data, x) {
generateVerticalGridLines(data, x, graphHeight, initialYCordOfChart) {
return (data.map(item => (
<Line
key={item.timeObject.timestamp}
x1={x(item.time)}
y1={-START_Y_POSITION_OF_GRAPH + 10}
y1={-initialYCordOfChart + 10}
x2={x(item.time)}
y2={-START_Y_POSITION_OF_GRAPH - GRAPH_HEIGHT - 10}
y2={-initialYCordOfChart - graphHeight - 10}
stroke={COLORS.gridColor}
strokeDasharray={[3, 3]}
strokeWidth="0.5"
/>
)))
}

generateForecastImageForEach(data, x) {
generateForecastImageForEach(data, x, graphHeight, initialYCordOfChart) {
return (data.map(item => (<Image
key={item.timeObject.timestamp}
x={x(item.time) - 17}
y={(START_Y_POSITION_OF_GRAPH + GRAPH_HEIGHT) * GRAPH_TRANSFORMATION - 60}
y={(initialYCordOfChart + graphHeight) * -1 - 60}
width={35}
height={35}
preserveAspectRatio="xMidYMid slice"
Expand All @@ -148,11 +137,11 @@ class RainfallChart extends React.PureComponent {
)))
}

generateDateText(data) {
generateDateText(data, svgHeight) {
return <Text
fontSize="20"
x={13}
y={-SVG_HEIGHT}
y={-svgHeight}
textAnchor="start"
fill={COLORS.gridColor}
fontFamily="Neucha-Regular"
Expand All @@ -167,7 +156,7 @@ class RainfallChart extends React.PureComponent {
key={'degree' + item.timeObject.timestamp}
fontSize={16}
x={x(item.time)}
y={y(item.precipIntensity) * GRAPH_TRANSFORMATION - 6}
y={y(item.precipIntensity) * -1 - 6}
textAnchor="middle"
fill={COLORS.mainText}
fontFamily="Neucha-Regular">
Expand Down
Loading

0 comments on commit 3948afc

Please sign in to comment.