From dc94d3d497ff00bc96982cd5af21ccb451394edc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=91=D0=B5=D0=BB=D0=BE=D0=B2=20=D0=90=D0=BB=D0=B5=D0=BA?= =?UTF-8?q?=D1=81=D0=B5=D0=B9?= Date: Wed, 30 Oct 2019 12:16:16 +0300 Subject: [PATCH 1/2] Add check xAxisTicksCount in CanttChart --- src/GanttChart/index.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/GanttChart/index.jsx b/src/GanttChart/index.jsx index be6fd23..9e41eea 100644 --- a/src/GanttChart/index.jsx +++ b/src/GanttChart/index.jsx @@ -75,11 +75,13 @@ class Chart extends Component { const yDomain = data.map((item) => item.titleBar); const datesDomain = d3extent(datePlainList, (d) => new Date(d)); + const calcTicksCount = + Math.floor((datesDomain[1] - datesDomain[0]) / (1000 * 60 * 60 * 24)) <= 2 + ? Math.floor((datesDomain[1] - datesDomain[0]) / (1000 * 60 * 60)) + : Math.floor((datesDomain[1] - datesDomain[0]) / (1000 * 60 * 60 * 24)); + const AxesTicksCount = { - xAxis: Math.min( - Math.floor((datesDomain[1] - datesDomain[0]) / (1000 * 60 * 60 * 24)), - (ticksCount && ticksCount.xAxis) || 30 - ), + xAxis: Math.min(calcTicksCount, (ticksCount && ticksCount.xAxis) || 30), yAxis: (ticksCount && ticksCount.yAxis) || data.length, }; From 5332719900457136bf1fa092a6955bea6c282ca8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=91=D0=B5=D0=BB=D0=BE=D0=B2=20=D0=90=D0=BB=D0=B5=D0=BA?= =?UTF-8?q?=D1=81=D0=B5=D0=B9?= Date: Fri, 1 Nov 2019 11:56:03 +0300 Subject: [PATCH 2/2] Add manualAxes --- .gitignore | 2 ++ examples/src/App.js | 3 ++- examples/src/Components/BarChart.jsx | 3 ++- examples/src/Components/BoxPlot.jsx | 3 ++- examples/src/Components/GanttChart.jsx | 10 ++++++++-- examples/src/Components/LineChart.jsx | 3 ++- examples/src/Components/StackedBarChart.jsx | 3 ++- package.json | 12 ++++++------ src/GanttChart/index.jsx | 5 +++-- 9 files changed, 29 insertions(+), 15 deletions(-) diff --git a/.gitignore b/.gitignore index c32f7eb..33037c4 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,5 @@ Desktop.ini npm-debug.log* yarn-debug.log* yarn-error.log* + +/examples \ No newline at end of file diff --git a/examples/src/App.js b/examples/src/App.js index a5fe67a..9f3f3cc 100644 --- a/examples/src/App.js +++ b/examples/src/App.js @@ -8,7 +8,8 @@ import BoxPlot from './Components/BoxPlot'; import GanttChart from './Components/GanttChart'; import LineChart from './Components/LineChart'; -import '@hh.ru/react-d3-chart-graphs/styles.css'; +// import '@hh.ru/react-d3-chart-graphs/styles.css'; +import './dist/styles.css'; class App extends Component { render() { diff --git a/examples/src/Components/BarChart.jsx b/examples/src/Components/BarChart.jsx index 9222bef..5c2065f 100644 --- a/examples/src/Components/BarChart.jsx +++ b/examples/src/Components/BarChart.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import {BarChart} from '@hh.ru/react-d3-chart-graphs'; +// import {BarChart} from '@hh.ru/react-d3-chart-graphs'; +import {BarChart} from '../dist/index.js'; const items = [ { diff --git a/examples/src/Components/BoxPlot.jsx b/examples/src/Components/BoxPlot.jsx index 2e6923f..6f35377 100644 --- a/examples/src/Components/BoxPlot.jsx +++ b/examples/src/Components/BoxPlot.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import {BoxPlot} from '@hh.ru/react-d3-chart-graphs'; +// import {BoxPlot} from '@hh.ru/react-d3-chart-graphs'; +import {BoxPlot} from '../dist/index.js'; const items = [ { diff --git a/examples/src/Components/GanttChart.jsx b/examples/src/Components/GanttChart.jsx index b293c1c..c0c5ddd 100644 --- a/examples/src/Components/GanttChart.jsx +++ b/examples/src/Components/GanttChart.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import {GanttChart} from '@hh.ru/react-d3-chart-graphs'; +// import {GanttChart} from '@hh.ru/react-d3-chart-graphs'; +import {GanttChart} from '../dist/index.js'; import {timeFormat} from 'd3-time-format'; const data = [ @@ -44,8 +45,12 @@ const axesProps = { yAxis: 5, }, tickFormat: { - xAxis: timeFormat('%d %B %y'), + // xAxis: timeFormat('%d %B %y'), + xAxis: timeFormat('%-I:%M:%S %p') }, + ticksCount: { + xAxis: 50 + } }; const stackColors = { @@ -70,6 +75,7 @@ export default () => { return ( {}; @@ -55,7 +56,7 @@ class Chart extends Component { }; render() { - const { data, axesProps, margins, stackColors, paddingMultiplier, fillOpacity, render } = this.props; + const { data, axesProps, margins, stackColors, paddingMultiplier, fillOpacity, render, manualAxes } = this.props; const { legend, padding, tickFormat, ticksCount } = axesProps; const defaultMargins = { top: 10, right: 10, bottom: 150, left: 80 }; const canvasMargins = margins || defaultMargins; @@ -81,7 +82,7 @@ class Chart extends Component { : Math.floor((datesDomain[1] - datesDomain[0]) / (1000 * 60 * 60 * 24)); const AxesTicksCount = { - xAxis: Math.min(calcTicksCount, (ticksCount && ticksCount.xAxis) || 30), + xAxis: manualAxes ? ticksCount.xAxis : Math.min(calcTicksCount, (ticksCount && ticksCount.xAxis) || 30), yAxis: (ticksCount && ticksCount.yAxis) || data.length, };