{"id":13565615,"url":"https://github.com/hhru/react-d3-chart-graphs","last_synced_at":"2025-04-13T22:32:07.607Z","repository":{"id":52724527,"uuid":"99781942","full_name":"hhru/react-d3-chart-graphs","owner":"hhru","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-21T10:33:30.000Z","size":1071,"stargazers_count":15,"open_issues_count":3,"forks_count":9,"subscribers_count":71,"default_branch":"master","last_synced_at":"2024-04-14T21:46:06.442Z","etag":null,"topics":["frontend-tools"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hhru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-08-09T08:08:07.000Z","updated_at":"2023-10-23T10:39:00.000Z","dependencies_parsed_at":"2024-01-16T18:59:38.956Z","dependency_job_id":"be877693-9a6c-4f71-bc81-26e283cbaba3","html_url":"https://github.com/hhru/react-d3-chart-graphs","commit_stats":{"total_commits":57,"total_committers":7,"mean_commits":8.142857142857142,"dds":"0.49122807017543857","last_synced_commit":"85fe7460ec61e76c7906840ee83644507b39532d"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hhru%2Freact-d3-chart-graphs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hhru%2Freact-d3-chart-graphs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hhru%2Freact-d3-chart-graphs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hhru%2Freact-d3-chart-graphs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hhru","download_url":"https://codeload.github.com/hhru/react-d3-chart-graphs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248790671,"owners_count":21162070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend-tools"],"created_at":"2024-08-01T13:01:51.238Z","updated_at":"2025-04-13T22:32:07.119Z","avatar_url":"https://github.com/hhru.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## React-d3-chart-graphs\nA javascript library for building charts based on d3.js@4.10.0\nAllows you to easily build the following graph:\n\n- [Bar Chart](#BarChart)\n- [Stacked Bar Chart](#StackedBarChart)\n- [GanttChart](#GanttChart)\n- [Box Plot](#BoxPlot)\n- [ResponsiveWrapper](#ResponsiveWrapper)\n- [LineChartTime](#LineChartTime)\n\n\u003cimg src=\"https://user-images.githubusercontent.com/3080207/29460770-d85faf6a-8431-11e7-9204-be7c4a43220e.png\"\u003e\n  \n\u003ca name=\"BarChart\"\u003e\u003c/a\u003e\n## Bar Chart\nA bar chart or bar graph is a chart or graph that presents grouped data with rectangular bars with lengths proportional \nto the values that they represent. Only vertical bars are supported.\n\nConsists of the following properties:\n\n- [axesProps.padding](#AxesProps)\n- data - type: array of object. \n\n    Fields:\n     ```\n    {\n        title: \"title chart\",\n        value: 7\n    }\n     ```\n- paddingMultiplier - type: Number (from 0 to 1). Default value = 0. Specifies an indent between bars.\n- margins - type: object. Set canvas margins.\n    Fields (default values):\n     ```\n        {\n            top: 10,\n            right: 10,\n            bottom: 150,\n            left: 80\n        }\n     ```\n- colorScale - type Object. Sets the color of the bar, depending on the value on the y-axis with the help of the function\n d3-interpolate.\n    Fields (default values):\n     ```\n        {\n            min: '#B2EBF2'\n            max: '#00BCD4',\n        }\n     ```  \n- handleBarClick - The click event is raised when the user clicks on the canvas. If user clicked on bar\nargument - item of data and metrics current bar.\n    Fields :\n    ```\n    {\n        metrics: {\n            left: 548\n            top: 129\n            width: 52\n        },\n        title: \"title chart\",\n        value: 7\n    }\n    ```\n    If user click on canvas without bar, argument is `null`\n\n- handleBarHover - The mouseenter and mouseleave events. If user moved mouse in bar, first argument - item of data and \nmetrics current bar, second - event data.\n    ```\n    {\n        metrics: {\n            left: 548\n            top: 129\n            width: 52\n        },\n        title: \"title chart\",\n        value: 7\n    },\n    event: {\n        clientX,\n        clientY,\n    }\n    ```\n    If user mouseleave bar or if user mouseenter on canvas without bar, arguments is `null`\n- toggleResize - type Boolean. Forced resizing by the parent, changing the current state to the opposite will resize.\n\n\u003ca name=\"StackedBarChart\"\u003e\u003c/a\u003e\n## Stacked Bar Chart\nBar graphs can also be used for more complex comparisons of data with grouped bar charts and stacked bar charts.\nIn a grouped bar chart, for each categorical group there are two or more bars.\n \n Consists of the following properties:\n \n - [axesProps.padding](#AxesProps)\n - data - type: array of object. \n \n     Fields:\n      ```\n     {\n        \"titleBar\": \"first bar\",\n        \"key\": \"uId\", //default titleBar\n         \"values\": [\n             {\n                 \"title\": \"BAR_1\",\n                 \"value\": 5\n             },\n             {\n                 \"title\": \"BAR_2\",\n                 \"value\": 7\n             },\n             {\n                 \"title\": \"BAR_3\",\n                 \"value\": 5\n             },\n             {\n                 \"title\": \"BAR_4\",\n                 \"value\": 10\n             },\n             {\n                 \"title\": \"BAR_5\",\n                 \"value\": 20\n             },\n             {\n                 \"title\": \"BAR_6\",\n                 \"value\": 5\n             },\n             {\n                 \"title\": \"BAR_7\",\n                 \"value\": 9\n             },\n             {\n                 \"title\": \"BAR_8\",\n                 \"value\": 12\n             },\n             {\n                 \"title\": \"BAR_9\",\n                 \"value\": 4\n             }\n         ]\n     }\n      ```\n- stackColors -type: object. It is map colors to title data.\n    Example:\n    ```\n    stackColors = {\n        BAR_1: {\n            color: '#607D8B', //bar color\n            legend: 'some bar 1', // legend text\n        },\n        BAR_2: {\n            color: '#4CAF50',\n            legend: 'some bar 2',\n        },\n    }\n    ```\n- paddingMultiplier - type: Number (from 0 to 1). Default value = 0. Specifies an indent between bars.\n- margins - type: object. Set canvas margins.\n    Fields (default values):\n     ```\n        {\n            top: 10,\n            right: 10,\n            bottom: 150,\n            left: 80\n        }\n     ```\n- handleBarClick - The click event is raised when the user clicks on the canvas. If user clicked on bar\nargument - item of data and metrics current bar and titleBar is a title of stack bars.\n    Fields :\n    ```\n    {\n        metrics: {\n            left: 548\n            top: 129\n            width: 52\n        },\n        title: \"title chart\",\n        value: 7,\n        titleBar: \"first bar\"\n    }\n    ```\n    If user click on canvas without bar, argument is `null`\n\n- handleBarHover - The mouseenter and mouseleave events. If user moved mouse in bar, first argument - item of data and \nmetrics current bar, second - event data.metrics current bar.\n    ```\n    {\n        metrics: {\n            left: 548\n            top: 129\n            width: 52\n        },\n        title: \"title chart\",\n        value: 7,\n        titleBar: \"first bar\"\n    },\n    event: {\n        clientX,\n        clientY,\n    }\n    ```\n    If user mouseleave bar or if user mouseenter on canvas without bar, arguments is `null`\n\n- toggleResize - type Boolean. Forced resizing by the parent, changing the current state to the opposite will resize.\n\n\u003ca name=\"GanttChart\"\u003e\u003c/a\u003e\n## Gantt Chart\n\u003cimg src=\"https://user-images.githubusercontent.com/3080207/31215926-38a5dcb6-a9ba-11e7-8753-bf85bff54b12.png\"\u003e\nA Gantt chart is a type of bar chart that illustrates a project schedule.\n \n Consists of the following properties:\n \n - [axesProps.padding](#AxesProps)\n - data - type: array of object. \n \n     Fields:\n      ```\n     {\n        titleBar: 'BAR_1 bar',\n        key: 'uId', //default titleBar\n        values: [\n             {\n                 title: 'status-1',\n                 dateStart: 'Fri, 10 Apr 2017 18:16:05 GMT',\n                 dateEnd: 'Tue, 12 Apr 2017 19:10:06 GMT',\n             },\n             {\n                 title: 'status-2',\n                 dateStart: 'Tue, 12 Apr 2017 19:10:06 GMT',\n                 dateEnd: 'Tue, 14 Apr 2017 19:10:06 GMT',\n             }\n         ]\n     }\n      ```\n- stackColors -type: object. It is map colors to title data.\n    Example:\n    ```\n    stackColors = {\n        status-1: {\n            color: '#607D8B', //bar color\n            legend: 'status first', // legend text\n        },\n        status-2: {\n            color: '#4CAF50',\n            legend: 'status second',\n        },\n    }\n    ```\n- paddingMultiplier - type: Number (from 0 to 1). Default value = 0. Specifies an indent between bars.\n- margins - type: object. Set canvas margins.\n    Fields (default values):\n     ```\n        {\n            top: 10,\n            right: 10,\n            bottom: 150,\n            left: 80\n        }\n     ```\n- handleBarClick - The click event is raised when the user clicks on the canvas. If user clicked on bar\nargument - item of data and metrics current bar and titleBar is a title of stack bars.\n    Fields :\n    ```\n    {\n        metrics: {\n            left: 548\n            top: 129\n            width: 52\n        },\n        title: 'title chart',\n        dateStart: 'Tue, 12 Apr 2017 19:10:06 GMT',\n        dateEnd: 'Tue, 14 Apr 2017 19:10:06 GMT',\n        titleBar: 'first bar'\n    }\n    ```\n    If user click on canvas without bar, argument is `null`\n\n- handleBarHover - The mouseenter and mouseleave events. If user moved mouse in bar, argument - first argument - item of data and \nmetrics current bar, second - event data.\n    ```\n    {\n        metrics: {\n            left: 548\n            top: 129\n            width: 52\n        },\n        title: 'title chart',\n        dateStart: 'Tue, 12 Apr 2017 19:10:06 GMT',\n        dateEnd: 'Tue, 14 Apr 2017 19:10:06 GMT',\n        titleBar: 'first bar'\n    },\n    event: {\n        clientX,\n        clientY,\n    }\n    ```\n    If user mouseleave bar or if user mouseenter on canvas without bar, arguments is `null`\n\n- toggleResize - type Boolean. Forced resizing by the parent, changing the current state to the opposite will resize.\n\n\u003ca name=\"BoxPlot\"\u003e\u003c/a\u003e\n## Box Plot\nBar graphs is a method for graphically depicting groups of numerical data through their quartiles.\n \n Consists of the following properties:\n \n - [axesProps.padding](#AxesProps)\n - data - type: array of object. \n \n     Fields:\n      ```\n     {\n         title: 'First bar',\n         numbers: {\n             min: 15,\n             max: 218,\n             median: 30,\n             quartiles: [20, 45],\n         },\n         outliers: [{\n             key: 'First',\n             value: 289,\n             title: 'text',\n         }],\n     }\n      ```\n- colorScale - type Object. Sets the color of the bar, depending on the value on the y-axis with the help of the function\n d3-interpolate.\n    Fields (default values):\n     ```\n        {\n            min: '#B2EBF2'\n            max: '#00BCD4',\n        }\n     ```  \n- paddingMultiplier - type: Number (from 0 to 1). Default value = 0. Specifies an indent between bars.\n- margins - type: object. Set canvas margins.\n    Fields (default values):\n     ```\n        {\n            top: 10,\n            right: 10,\n            bottom: 150,\n            left: 80\n        }\n     ```\n- handleBarClick - The click event is raised when the user clicks on the bar. \nArgument - item of data and metrics current bar.\n    Fields :\n    ```\n    {\n        metrics: {\n            left: 548\n            top: 129\n            width: 52\n        },\n        title: \"title chart\",\n        values: {\n             min: 7,\n             max: 118,\n             median: 20,\n             quartiles: {\n                 min: 15,\n                 max: 40,\n             },\n        },\n        outliers: {\n            min: 2,\n            max: 220,\n        },\n        titleBar: \"first bar\"\n    }\n    ```\n- handleOutlierClick - The click event is raised when the user clicks on the outlier.\n Argument - item of data and metrics current Circle.\n  ```\n     {\n         metrics: {\n             left: 548\n             top: 129\n             width: 5\n         },\n         title: 'First bar',\n         values: {\n             min: 7,\n             max: 118,\n             median: 20,\n             quartiles: {\n                 min: 15,\n                 max: 40,\n             },\n         },\n         outliers: {\n             min: 2,\n             max: 220,\n         }\n     }\n    ```\n\n- handleBarHover - The mouseenter and mouseleave events. If user moved mouse in bar, first argument - item of data and \nmetrics current bar, second - event data.\n    ```\n    {\n        metrics: {\n            left: 548\n            top: 129\n            width: 52\n        },\n        title: 'First bar',\n        values: {\n            min: 7,\n            max: 118,\n            median: 20,\n            quartiles: {\n                min: 15,\n                max: 40,\n            },\n        },\n        outliers: {\n            min: 2,\n            max: 220,\n        }\n    }, \n    event: {\n        clientX,\n        clientY,\n    }\n    ```\n    If user mouseleave bar or if user mouseenter on canvas without bar, arguments is `null`\n\n- toggleResize - type Boolean. Forced resizing by the parent, changing the current state to the opposite will resize.\n \n\u003ca name=\"AxesProps\"\u003e\u003c/a\u003e\n## Axes props\n\n- axesProps.legend.xAxis || yAxis - Text on legend\n- axesProps.padding.xAxis || yAxis - If padding is specified, sets the padding to the specified value in pixels and\n  returns the axis. Default value = 5px. [d3-axis tickPadding](#https://github.com/d3/d3-axis#axis_tickPadding)\n- axesProps.ticksCount.xAxis || yAxis - [d3-axis tickArguments](https://github.com/d3/d3-axis#axis_tickArguments).\n  Default value = 4.\n- axesProps.tickFormat.xAxis || yAxis - If format is specified, sets the tick format function and returns the axis.\n  [d3-axis axis_tickFormat.](https://github.com/d3/d3-axis#axis_tickFormat)\n\n    Example params:\n\n    ```\n    axesProps = {\n        label: { //Label text on legend\n            xAxis: 'Label bottom axis',\n            yAxis: 'Label left axis'\n        },\n        padding: {\n            xAxis: 20,\n            yAxis: 20\n        },\n        ticksCount: 6,\n        tickFormat: {\n            xAxis: function(value) {\n                return value + 'mm';\n            }\n        }\n    }\n    ```\n\n\u003ca name=\"Axes\"\u003e\u003c/a\u003e\n## Axes\n\nComponent for creating chart's axes. Has the following props:\n\n- `orient`\n- `scale`\n- `translate`\n- `tickSize`\n- `legend` see [AxesProps.legend](#AxesProps)\n- `padding` see [AxesProps.padding](#AxesProps)\n- `ticksCount` see [AxesProps.ticksCount](#AxesProps)\n- `tickFormat` see [AxesProps.tickFormat](#AxesProps)\n\n\u003ca name=\"ResponsiveWrapper\"\u003e\u003c/a\u003e\n## Responsive Wrapper\n\nWrapper component that expands to container's width. Forwards `parentWidth` prop to wrapped component.\n\nExample:\n\n```js\nimport {Component} from 'react';\nimport {ResponsiveWrapper} from '@hh.ru/react-d3-chart-graphs';\n\nclass MyComponent extends Component {\n    render() {\n        const { parentWidth } = this.props;\n        // ...\n    }\n}\n\nexport default ResponsiveWrapper(MyComponent);\n```\n\u003ca name=\"LineChartTime\"\u003e\u003c/a\u003e\n## Line Chart Time\nLine charts are used to display trends over time. Use a \"line chart time\" if you have dates on the horizontal axis.\n\nConsists of the following properties:\n\n- [axesProps.padding](#AxesProps)\n- data - type: array of object. \n\n    Fields:\n     ```\n    {\n        title: 'First',\n        values: [\n            {\n                date: 'Fri, 30 Jun 2017 00:00:00 GMT',\n                value: 0.04918032786885246,\n            },\n        ],\n    }\n     ```\n- margins - type: object. Set canvas margins.\n    Fields (default values):\n     ```\n        {\n            top: 10,\n            right: 10,\n            bottom: 150,\n            left: 80\n        }\n     ```\n- stackColors -type: object. It is map colors to title data.\n    Example:\n    ```\n    stackColors = {\n        First: {\n            color: '#607D8B', //bar color\n            legend: 'some bar 1', // legend text\n        },\n    }\n    ```\n- hideCircles -type: Boolean. Hide \"circles\" data point.\n- handleCircleHover - The mouseenter and mouseleave events. If user moved mouse in Circle, first argument - item of data\nand metrics current Circle, second - event data.\n    ```\n    {\n        metrics: {\n            left: 548\n            top: 129\n            width: 52\n        },\n        title: 'First',\n        item: {\n            date: 'Fri, 30 Jun 2017 00:00:00 GMT',\n            value: 0.04918032786885246,\n        }\n    }\n    event: {\n        clientX,\n        clientY,\n    }\n    ```\n    If user mouseleave bar or if user mouseenter on canvas without Circle, arguments is `null`\n- toggleResize - type Boolean. Forced resizing by the parent, changing the current state to the opposite will resize.\n\n## Examples and development\n    NODE_ENV=development yarn wepack \u0026\u0026 cd examples \u0026\u0026 yarn start \n\n\n### 0.1.0\n\n* First release\n* Add bar chart and stacked bar chart\n\n### 1.0.0\n\n* Changed data props field in Stacked bar chart\n\n### 2.0.0\n\n* Changed data props stackColors in Stacked bar chart (added legend text)\n\n### 2.0.1\n\n* Changed development build, fix uglify.\n\n\n### 2.1.0\n\n* Add box plot.\n\n### 2.1.1\n\n* Corrected the positioning of the bar in BoxPlot\n\n### 3.0.0\n\n* Export Axes and ResponsiveWrapper, change axesProps.ticksCount format.\n\n### 3.1.1\n\n* Add handleEjectionClickMinClick, handleEjectionMaxClick in BoxPlot\n\n### 3.1.1\n\nFix boxPlot mousemove\n\n### 4.0.0\n\nRename click handlers BoxPlot\n\n### 4.1.0\n\nExport Legends\n\n### 4.2.0\n\nAdd Gantt Chart\n\n### 4.2.1\n\nAdd tickCount props to Axes GanttChart\n\n### 5.0.0\n\nRename ejections to outliers, add outliers' hover handlers\n\n### 5.1.0\n\nIntroduce handleOutlierClick and handleOutlierHover, update box plot chart's appearance\n\n### 5.1.1\n\nAdd second argument event to hover\n\n### 5.1.3\n\nUpdate react and react-dom to 16.0 version and fix box plot\n\n### 5.1.4\n\nBug fixes\n\n### 5.2.0\n\nAdd chart LineChartTime\n\n### 5.2.1\n\nMake Gantt chart height adaptive\n\n### 5.3.0\n\nAdd render prop to Gantt chart.\n\n### 6.0.0\n\nUpdated dependencies\n\n### 6.0.3\n\nUp webpack version\n\n### 6.0.4\n\nUp react-scripts version in examples\n\n### 6.1.0\n\nAdd graph component\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhhru%2Freact-d3-chart-graphs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhhru%2Freact-d3-chart-graphs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhhru%2Freact-d3-chart-graphs/lists"}