{"_id":"victory-composed","_rev":"78-ec33ac725f9b027adc4f6d61cecf8a12","name":"victory-composed","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"victory-composed","version":"0.0.1","author":{"name":"Ken Wheeler"},"license":"MIT","_id":"victory-composed@0.0.1","maintainers":[{"name":"thekenwheeler","email":"ken_wheeler@me.com"}],"homepage":"https://github.com/formidablelabs/victory-composed","bugs":{"url":"https://github.com/formidablelabs/victory-composed/issues"},"dist":{"shasum":"773066889460723a720d5f1af11ce3bd7f1c214b","tarball":"https://registry.npmjs.org/victory-composed/-/victory-composed-0.0.1.tgz","integrity":"sha512-7fo3ZCuGHcPyUmauPsjgdffOV6lHpwUcnV4hNo54tKqDvp4W9GNLTP+oFL/wbeh0krLJUNXerffHzpYrPHcqvw==","signatures":[{"sig":"MEQCIAv/q/p0alc9RbV8Xl4ZmT4HOJLc92M3pvbvMfRDuJkVAiAKt3LRyXL3umRZjyp9/F1xxUVPKxKeiqIF0EpFGwz/Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","_from":".","_shasum":"773066889460723a720d5f1af11ce3bd7f1c214b","engines":{"npm":">=3.0.0"},"gitHead":"2849e00e549c965510e280b24369e378f87fb5a6","scripts":{"test":"builder run check","start":"builder run hot","version":"builder run npm:version && git add dist && git commit -m \"Commit 'dist/' for publishing\"","benchmark":"builder run check-perf","preversion":"builder run npm:preversion","postinstall":"cd lib || builder run npm:postinstall","docs-build-static":"echo 'Static docs generation for victory-chart is not supported.'"},"_npmUser":{"name":"thekenwheeler","email":"ken_wheeler@me.com"},"repository":{"url":"git+https://github.com/formidablelabs/victory-composed.git","type":"git"},"_npmVersion":"3.9.3","description":"Top level composed component for Victory","directories":{},"_nodeVersion":"6.2.1","dependencies":{"victory-pie":"^6.0.0","victory-core":"^8.0.1","victory-chart":"^12.0.1","builder-victory-component":"^2.5.0"},"engineStrict":true,"react-native":"src/index.js","devDependencies":{"chai":"^3.5.0","mocha":"^3.1.0","react":"^15.3.2","sinon":"^1.17.6","enzyme":"^2.4.1","radium":"^0.18.1","ecology":"^1.6.1","react-dom":"^15.3.2","sinon-chai":"^2.8.0","file-loader":"^0.9.0","react-router":"^2.8.1","formidable-landers":"^5.1.1","react-addons-test-utils":"^15.3.2","builder-victory-component-dev":"^2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/victory-composed-0.0.1.tgz_1476473647931_0.8884290044661611","host":"packages-12-west.internal.npmjs.com"}}},"time":{"created":"2016-10-14T19:34:10.158Z","modified":"2026-07-20T21:09:47.752Z","0.0.1":"2016-10-14T19:34:10.158Z"},"bugs":{"url":"https://github.com/formidablelabs/victory-composed/issues"},"author":{"name":"Ken Wheeler"},"license":"MIT","homepage":"https://github.com/formidablelabs/victory-composed","repository":{"url":"git+https://github.com/formidablelabs/victory-composed.git","type":"git"},"description":"Top level composed component for Victory","maintainers":[{"email":"sarahmichelleegan@gmail.com","name":"sarmeyer"},{"email":"mariano.martinez@formidable.com","name":"mariano-formidable"},{"email":"ryan@loose-bits.com","name":"ryan.roemer"},{"email":"admin@formidablelabs.com","name":"formidable-owner"},{"email":"npm@formidablelabs.com","name":"formidablelabs"},{"email":"sarah.wright@formidable.com","name":"sarahformidable"},{"email":"senesealessandro@gmail.com","name":"ceceppa"},{"email":"ken_wheeler@me.com","name":"thekenwheeler"}],"readme":"<h1 align=\"center\">victory-composed</h1>\n\n<h4 align=\"center\">\n  Ready-made composed Victory Components!\n</h4>\n\n***\n\n![demo](http://i.imgur.com/RIoXvJB.gif)\n\n<!-- MarkdownTOC autolink=\"true\" depth=3 bracket=\"round\" -->\n\n- [Getting Started](#getting-started)\n- [API Documentation](#api-documentation)\n  - [Common Props](#common-props)\n  - [VictoryAreaChart](#victoryareachart)\n  - [VictoryBarChart](#victorybarchart)\n  - [VictoryLineChart](#victorylinechart)\n  - [VictoryScatterChart](#victoryscatterchart)\n  - [VictoryPieChart](#victorypiechart)\n- [Themes](#themes)\n- [Development](#development)\n- [Contributing](#contributing)\n- [_IMPORTANT_](#important)\n\n<!-- /MarkdownTOC -->\n\n## Getting Started\n\n`victory-composed` is a set of composed, pre-styled Victory components that can be used to display rich, interactive charts. Our theming system not only supports style based theming, but behavioral/compositional theming as well.\n\n1. Add `victory-composed` to your project\n\n\t```sh\n\tnpm install victory-composed --save\n\t```\n\n  For React Native, you'll need `victory-native` and `react-native-svg`:\n\n  ```sh\n  npm install victory-native victory-composed react-native-svg --save\n  react-native link react-native-svg\n  ```\n\n2. Add your first `victory-composed` component:\n\n\t```js\n   import React, { Component } from 'react';\n   import { render } from 'react-dom';\n   import { VictoryLineChart } from 'victory-composed';\n\n   class MyLineChart extends Component {\n     render() {\n       return (\n         <VictoryLineChart />\n       );\n     }\n   }\n\n   render(<MyLineChart />, document.getElementById('app'));\n\t```\n3. Explore the API below and out the various possible components and configurations and their themes!\n\n## API Documentation\n\n### Common Props\n\nThe following is a list of common props shared by each chart, with the exception of VictoryPieChart where noted:\n\n\n#####categories `oneOfType(shape({ x: arrayOf(string), y: arrayOf(string) }), arrayOf(string))`\n\nThe categories prop specifies how categorical data for a chart should be ordered. This prop should be given as an array of string values, or an object with these arrays of values specified for x and y. If this prop is not set, categorical data will be plotted in the order it was given in the data array.\n\n>Not applicable to VictoryPieChart\n\nExamples: `[\"dogs\", \"cats\", \"mice\"], { x: [\"dogs\",\"cats\"], y: [\"mice\",\"birds\"]}`\n\n--\n\n#####domain `oneOfType(shape({ x: arrayOf(number), y: arrayOf(number) }), arrayOf(number))`\n\nThe domain prop describes the range of values your chart will include. This prop can be given as a array of the minimum and maximum expected values for your chart, or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information.\n\n>Not applicable to VictoryPieChart\n\n\nExamples: `[-1, 1], {x: [0, 100], y: [0, 1]}`\n\n--\n\n#####domainPadding `oneOfType(shape({ x: number, y: number }), number))`\n\nThe domainPadding prop specifies a number of pixels of padding to add to the beginning and end of a domain. This prop is useful for explicitly spacing ticks farther from the origin to prevent crowding. This prop should be given as an object with numbers specified for x and y.\n\n>Not applicable to VictoryPieChart\n\nExamples: `20, { x: 5, y: 10 }`\n\n--\n\n#####height `number`\n\nThe height props specifies the height of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\n--\n\n#####subtitle `string`\n\nThe subtitle for your chart. This value should be a string.\n\n--\n\n#####theme `object`\n\nThis prop specifies which theme to use for your chart. See the themes section below for available themes and how to add them.\n\nExample `Themes.simple`\n\n--\n\n#####title `string`\n\nThe title for your chart. This value should be a string.\n\n--\n\n#####width `number`\n\nThe width props specifies the width of the svg viewBox of the chart container. This value should be given as a number of pixels.\n\n--\n\n#####xAxis `object`\n\nThis prop specifies a set of props to pass to the x axis. Valid props can be found here: [VictoryAxis](https://formidable.com/open-source/victory/docs/victory-axis#props)\n\n>Not applicable to VictoryPieChart\n\nExample `{ name: \"test\" }`\n\n--\n\n#####yAxis `object`\n\nThis prop specifies a set of props to pass to the y axis. Valid props can be found here: [VictoryAxis](https://formidable.com/open-source/victory/docs/victory-axis#props)\n\n>Not applicable to VictoryPieChart\n\nExample `{ scale: \"time\" }`\n\n---\n\n### VictoryAreaChart\n\n--\n\n#####interpolation `string`\n\nThe interpolation prop determines how data points should be connected when plotting a line. The following values are valid:\n\n*\"basis\", \"basisClosed\", \"basisOpen\", \"bundle\", \"cardinal\", \"cardinalClosed\", \"cardinalOpen\", \"catmullRom\", \"catmullRomClosed\", \"catmullRomOpen\", \"linear\", \"linearClosed\", \"monotoneX\", \"monotoneY\", \"natural\", \"radial\", \"step\", \"stepAfter\", \"stepBefore\"*\n\n--\n\n#####series `arrayOf(object)`\n\nThe series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found here: [VictoryArea](https://formidable.com/open-source/victory/docs/victory-area)\n\nThe series child object shape is as follows:\n\n```\n{\n  data: oneOfType(array, object),\n  samples: number,\n  style: object,\n  x: oneOfType(string, func),\n  y: oneOfType(string, func)\n}\n```\n\nExample `[{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]`\n\n--\n\n#####stacked `bool`\n\nThe stacked prop is a boolean value that determines whether to stack your area chart series.\n\n---\n\n### VictoryBarChart\n\n--\n\n#####horizontal `bool`\n\nThe horizontal prop is a boolean value that determines whether to display your bar chart series horizontally.\n\n--\n\n#####labels `func`\n\nThe labels prop defines labels that will appear above each bar in your bar chart. This prop should be given as a function of data.\n\nExample `(datum) => datum.y`\n\n--\n\n#####offset `number`\n\nThe offset prop on VictoryGroup controls the spacing between each series of bars in a group.\n\n--\n\n#####series `arrayOf(object)`\n\nThe series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found here: [VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar)\n\nThe series child object shape is as follows:\n\n```\n{\n  data: oneOfType(array, object),\n  style: object,\n  x: oneOfType(string, func),\n  y: oneOfType(string, func)\n}\n```\n\nExample `[{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]`\n\n--\n\n#####stacked `bool`\n\nThe stacked prop is a boolean value that determines whether to stack your bar chart series.\n\n---\n\n### VictoryLineChart\n\n#####interpolation `string`\n\nThe interpolation prop determines how data points should be connected when plotting a line. The following values are valid:\n\n*\"basis\", \"basisClosed\", \"basisOpen\", \"bundle\", \"cardinal\", \"cardinalClosed\", \"cardinalOpen\", \"catmullRom\", \"catmullRomClosed\", \"catmullRomOpen\", \"linear\", \"linearClosed\", \"monotoneX\", \"monotoneY\", \"natural\", \"radial\", \"step\", \"stepAfter\", \"stepBefore\"*\n\n--\n\n#####series `arrayOf(object)`\n\nThe series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found here: [VictoryLine](https://formidable.com/open-source/victory/docs/victory-line)\n\nThe series child object shape is as follows:\n\n```\n{\n  data: oneOfType(array, object),\n  samples: number,\n  style: object,\n  x: oneOfType(string, func),\n  y: oneOfType(string, func)\n}\n```\n\nExample `[{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]`\n\n---\n\n### VictoryScatterChart\n\n#####labels `func`\n\nThe labels prop defines labels that will appear above each bar in your bar chart. This prop should be given as a function of data.\n\nExample `(datum) => datum.y`\n\n--\n\n#####series `arrayOf(object)`\n\nThe series prop allows you to provide data series to your chart. Each object in the series array is representative of a subset of the properties found here: [VictoryScatter](https://formidable.com/open-source/victory/docs/victory-scatter)\n\nThe series child object shape is as follows:\n\n```\n{\n  bubbleProperty: string,\n  data: oneOfType(array, object),\n  samples: number,\n  size: number,\n  symbol: oneOfType(string, func),\n  style: object,\n  x: oneOfType(string, func),\n  y: oneOfType(string, func)\n}\n```\n\nExample `[{ data: [{ x: 0, y: 1 }] ] }, { data: [ [2,3], [4 ,5] ] }]`\n\n--\n\n#####size `oneOfType(number, func)`\n\nThe size prop determines how to scale each data point\n\nExample `3`\n\n--\n\n#####symbol `oneOfType(string, func)`\n\nThe symbol prop determines which symbol should be drawn to represent data points.\n\nValid string values: `\"circle\", \"diamond\", \"plus\", \"square\", \"star\", \"triangleDown\", \"triangleUp\"`\n\nExample `\"circle\"`\n\n---\n\n### VictoryPieChart\n\n#####cornerRadius `number`\n\nSet the cornerRadius for every dataComponent (Slice by default) within VictoryPie\n\n---\n\n#####endAngle `number`\n\nThe overall end angle of the pie in degrees. This prop is used in conjunction with startAngle to create a pie that spans only a segment of a circle.\n\n---\n\n#####innerRadius `number`\n\nWhen creating a donut chart, this prop determines the number of pixels between the center of the chart and the inner edge of a donut. When this prop is set to zero a regular pie chart is rendered.\n\n---\n\n#####labels `oneOfType(arrayOf(string), func)`\n\nThe labels prop defines labels that will appear above each bar in your bar chart. This prop should be given as a function of data or an array of strings.\n\nExample `(datum) => datum.y`\n\n--\n\n#####padAngle `number`\n\nThe padAngle prop determines the amount of separation between adjacent data slices in number of degrees\n\n--\n\n#####startAngle `number`\n\nThe overall start angle of the pie in degrees. This prop is used in conjunction with endAngle to create a pie that spans only a segment of a circle.\n\n---\n\n\n## Themes\n\n`victory-composed` has a set of beautiful preset themes ready to go. We default to the `simple` theme by default, but if you want to try out the whole gang, here is how:\n\n```js\nimport { VictoryLineChart, Themes } from \"victory-composed\";\n\nclass MyChart extends Component {\n  render() {\n    return (\n      <VictoryLineChart theme={Themes.dark} />\n    )\n  }\n}\n```\n\nRight now we have 4 themes you can choose from:\n\n`bright` - A bright, fun theme.\n\n![bright](http://i.imgur.com/ZXKDgEe.png)\n\n`simple` - A simple, yet elegant theme.\n\n![simple](http://i.imgur.com/aAfwrWj.png)\n\n`dark` - Uh oh who turned the lights out. A dark theme for your charts.\n\n![dark](http://i.imgur.com/qJhlp1f.png)\n\n`danceparty` - Use this one carefully. You might have too much fun.\n\n![danceparty](http://i.imgur.com/ULpP5LV.png)\n\nKeep your eyes peeled, there are more themes on the way!\n\n## Development\n\n```sh\n# Run the demo app server\n$ npm start\n\n# Open the demo app\n$ open http://localhost:3000\n\n# Run tests\n$ npm test\n```\n\nFor more on the development environment, see [DEVELOPMENT](https://github.com/FormidableLabs/builder-victory-component/blob/master/dev/DEVELOPMENT.md) in the project builder archetype.\n\n## Contributing\n\nPlease review our [Code of Conduct](https://github.com/FormidableLabs/builder-victory-component/blob/master/CONTRIBUTING.md#contributor-covenant-code-of-conduct) before contributing.\n\nFor a detailed contribution guide, please see [CONTRIBUTING](https://github.com/FormidableLabs/builder-victory-component/blob/master/dev/CONTRIBUTING.md) in the project builder archetype.\n\n## _IMPORTANT_\n\nThis project is in a pre-release state. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes!\n","readmeFilename":"README.md"}