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; @@ -75,11 +76,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: manualAxes ? ticksCount.xAxis : Math.min(calcTicksCount, (ticksCount && ticksCount.xAxis) || 30), yAxis: (ticksCount && ticksCount.yAxis) || data.length, };