react-native-simple-charts
Version:
Simple charts with gradient for react-native
277 lines (255 loc) • 8.77 kB
JavaScript
// import {hourTo12Format} from '../Transforms/DateHelper'
// import {Colors} from '../Themes/'
export const transformYAxeData = (data, YSectors, customMaxYValue) => {
let YIndex = YSectors * 10
let transformedData = []
// define max value $
let maxValue = 0
data.map((chartObj) => {
maxValue = Math.max(getMaxArrayValue(chartObj["chart"]), maxValue)
})
if (maxValue < 10) {
YIndex = YIndex / 10
}
// define max Y value
let maxYValue = customMaxYValue || Math.ceil(maxValue / YIndex) * YIndex
console.log(maxValue);
// define axisYData array
let axisYData = []
for (var i = 1; i < (YSectors + 1); i++) {
axisYData.push(maxYValue / (YSectors) * i)
}
// build array for Chart component
data.map((item) => {
// get chart Color
let chartColor = 'red'
let pointsArray = item["chart"]
let transformedPointsArray = []
pointsArray.map((pointItem, pointIndex) => {
transformedPointsArray.push({
"x": pointItem.x,
"y": (pointItem.y * (2 * YSectors) / maxYValue),
"props": pointItem.props
})
})
transformedData.push({
"chart" : transformedPointsArray
})
})
return {transformedData, axisYData}
}
export const transformResponseData = (data, YSectors) => {
let YIndex = YSectors * 10
let transformedData = []
// define max value $
let maxValue = getMaxValue(data)
// define max Y value
let maxYValue = Math.ceil(maxValue / YIndex) * YIndex // 40 it because we must render 4 steps on Y axis wich rounded to 10
// console.tron.log(maxValue);
// define axisYData array
let axisYData = []
for (var i = 1; i < (YSectors + 1); i++) {
axisYData.push(maxYValue / (YSectors) * i)
}
// build array for Chart component
Object.keys(data).map((key) => {
// get chart Color
let chartColor = 'red'
let pointsArray = data[key]
let transformedPointsArray = []
pointsArray.map((pointItem, pointIndex) => {
transformedPointsArray.push({
"x": (pointIndex + 1).toString(),
"y": (pointItem * (2 * YSectors) / maxYValue), // scale to max value 8
"props": {
"strokeWidth": 2,
"renderPoints": true,
"strokeColor": chartColor,
"pointColor1": 'grey',
"pointColor2": 'grey'
}
})
})
transformedData.push({
"chart" : transformedPointsArray
})
})
return {transformedData, axisYData}
}
function getMaxValue(data){
let maxValue = 0
Object.keys(data).map((key) => {
maxValue = Math.max(Math.max.apply(null, data[key]), maxValue)
})
return maxValue
}
function getMaxArrayValue(data){
let maxValue = 0
data.map((item) => {
maxValue = Math.max(item.y, maxValue)
})
return maxValue
}
export const getDataForGraph = (data) => {
let convertedData = []
data.map((charts)=>{
let chartsProps = charts.props
let chartObj = {}
let chart = []
charts.chart.map((points, index)=>{
let fillGradient = chartsProps.activeZoneArr && chartsProps.activeZoneArr.includes(points[0])
let lastPointGradient = false
if (chartsProps.activeZoneArr && index > 0 && chartsProps.activeZoneArr.includes(charts.chart[index - 1][0])) {
lastPointGradient = true
}
let chartItem = {
x: points[0],
y: points[1],
props: {
strokeWidth: chartsProps.strokeWidth,
strokeColor: fillGradient ? chartsProps.activeZoneColor : chartsProps.color,
renderPoints: chartsProps.renderPoints,
fillGradient: fillGradient,
gradientStartColor: chartsProps.activeZoneColor,
gradientEndColor: chartsProps.activeZoneColor,
pointColor1: (fillGradient || lastPointGradient) ? chartsProps.activeZoneColor : chartsProps.color,
pointColor2: fillGradient ? chartsProps.activeZoneColor : chartsProps.color,
}
}
chart.push(chartItem)
})
chartObj.chart = chart
chartObj.activeZoneArr = chartsProps.activeZoneArrFull
convertedData.push(chartObj)
})
return convertedData
}
export const buildGraphData = (data, fillGradient, color, activeZoneColor, renderSecondPeriod) => {
let activeZoneArr = getActiveZoneArr(data.activeHoursPeriods, true, renderSecondPeriod)
let convertedData = []
let chartObj = {}
let chart = []
Object.keys(data.chart).map((point)=> {
chart.push([data.chart[point].key, data.chart[point].value])
})
chartObj.chart = chart
chartObj.props = {
strokeWidth: 2,
renderPoints: true,
color: color,
activeZoneArr: fillGradient ? activeZoneArr : undefined,
activeZoneArrFull: fillGradient ? getActiveZoneArr(data.activeHoursPeriods,false, renderSecondPeriod) : undefined,
activeZoneColor: fillGradient ? activeZoneColor : undefined,
}
convertedData.push(chartObj)
return convertedData
}
export const getActiveZoneArr = (periods,withoutLastElement,renderSecondPeriod) => {
let activeZoneArr = []
// for (var i = Number(periods[0]); i <= Number(periods[1]); i++) {
// let time12format = hourTo12Format(i)
// let time12format = hourTo12Format(i)
// activeZoneArr.push(time12format.time + ' ' + time12format.period)
// }
// activeZoneArr = withoutLastElement ? activeZoneArr.slice(0, -1) : activeZoneArr
// if (renderSecondPeriod) {
// for (var i = Number(periods[2]); i <= Number(periods[3]); i++) {
// let time12format = hourTo12Format(i)
// activeZoneArr.push(time12format.time + ' ' + time12format.period)
// }
// activeZoneArr = withoutLastElement ? activeZoneArr.slice(0, -1) : activeZoneArr
// }
return activeZoneArr
}
export const average = (x1, x2) => {
let maxValue = Math.max(x1,x2)
let minValue = Math.min(x1,x2)
return minValue + (maxValue - minValue) / 2
}
export const halfAverage = (x1, x2) => {
let maxValue = Math.max(x1,x2)
let minValue = Math.min(x1,x2)
return minValue + (maxValue - minValue) / 4
}
export const getAxisXSectorsArray = (state) => {
let result = []
let {axisXData, Xwidth, OX, OY, maxOY} = state
let axisXSectorsCoordinates
let renderAxisXSector = false
axisXData.map(() => {
axisXSectorsCoordinates = axisXSectorsCoordinates ? axisXSectorsCoordinates + Xwidth : OX
renderAxisXSector = !renderAxisXSector
let x = axisXSectorsCoordinates + Xwidth / 2
if (renderAxisXSector) {
let linePath = 'M' + (x + Xwidth / 2) + ' ' + OY +
' ' + (x + Xwidth / 2) + ' ' + maxOY +
' ' + (x - Xwidth / 2) + ' ' + maxOY +
' ' + (x - Xwidth / 2) + ' ' + OY
result.push(linePath)
}
})
return result
}
export const getAxisXLinesArray = (state) => {
let result = []
let axisXLinesCoordinates
let {axisXData, Xwidth, OX, OY, maxOY} = state
axisXData.map(() => {
axisXLinesCoordinates = axisXLinesCoordinates ? axisXLinesCoordinates + Xwidth : OX
let x = axisXLinesCoordinates + Xwidth / 2
let linePath = 'M' + (x + Xwidth / 2) + ' ' + OY + ' ' + (x + Xwidth / 2) + ' ' + maxOY
result.push(linePath)
})
return result
}
export const getAxisYLinesArray = (state, axisYData) => {
let result = []
let axisYLinesCoordinates
let {realWidth, Ywidth, OX, OY} = state
axisYData.map(() => {
axisYLinesCoordinates = axisYLinesCoordinates ? axisYLinesCoordinates - Ywidth : (OY - Ywidth)
let path = 'M' + OX + ' ' + axisYLinesCoordinates + ' ' + realWidth + ' ' + axisYLinesCoordinates
result.push(path)
})
return result
}
export const getPointPathArray = (state) => {
let pointPathArray = []
let gradientPathArray = []
let {pointsData, convertedData, height} = state
pointsData.map((data, index) => {
convertedData[index].map((chart, i) => {
if (i !== data.chart.length - 1) {
const x1 = chart.x
const y1 = chart.y
const x2 = convertedData[index][i + 1].x
const y2 = convertedData[index][i + 1].y
if (data.chart[i].props.fillGradient) {
gradientPathArray.push(getGradientPath(x1,y1,x2,y2,data.chart[i].props.gradientStartColor, data.chart[i].props.gradientEndColor, height))
}
let path = 'M ' +
' ' + x1 + ',' + y1
path = path + ' Q ' +
halfAverage(x1, x2) + ' ' + y1 +
', ' + average(x1, x2) + ' ' + average(y1, y2) +
' T ' + x2 + ' ' + y2
pointPathArray.push(path)
}
})
})
return {
pointPathArray,
gradientPathArray,
}
}
function getGradientPath(x1,y1,x2,y2,startColor,endColor,height){
let path = 'M ' +
x1 + ',' + height / 8 * 7 +
' ' + x1 + ',' + y1 +
' Q ' +
halfAverage(x1, x2) + ' ' + y1 +
', ' + average(x1, x2) + ' ' + average(y1, y2) +
' T ' + x2 + ' ' + y2 +
' L ' + x2 + ',' + height / 8 * 7
return path
}