Skip to content

Commit

Permalink
Merge pull request omerg#3 from welovedevs/add_quadrants_options
Browse files Browse the repository at this point in the history 
Add quadrants options
  • Loading branch information
Omer Gurarslan committed May 21, 2021
2 parents 4a21b6a + 069638d commit 40f0ed7
Show file tree
Hide file tree
Showing 8 changed files with 5,726 additions and 4,071 deletions.
38 changes: 23 additions & 15 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,24 @@
{
"loose": true
}
]
],
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-syntax-optional-chaining"
]
},
"dependencies": {
"d3": "^5.9.7",
"d3-color": "^2.0.0",
"d3-scale": "^3.2.3",
"d3-scale-chromatic": "^2.0.0",
"d3-shape": "^2.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-components": "^4.3.2"
},
"peerDependencies" : {
"styled-components": ">= 4",
"peerDependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
"react-dom": "^16.8.6",
"styled-components": ">= 4"
},
"scripts": {
"start": "react-scripts start",
Expand All @@ -64,16 +69,19 @@
]
},
"devDependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@storybook/addon-actions": "^5.1.9",
"@storybook/addon-console": "^1.2.1",
"@storybook/addon-links": "^5.1.9",
"@storybook/addons": "^5.1.9",
"@storybook/react": "^5.1.9",
"@babel/cli": "^7.12.8",
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-syntax-optional-chaining": "^7.8.3",
"@babel/preset-env": "^7.12.7",
"@babel/preset-react": "^7.12.7",
"@storybook/addon-actions": "^6.1.9",
"@storybook/addon-console": "^1.2.2",
"@storybook/addon-links": "^6.1.9",
"@storybook/addons": "^6.1.9",
"@storybook/core": "6.1.9",
"@storybook/react": "^6.1.9",
"@storybook/theming": "latest",
"prop-types": "^15.7.2",
"react-scripts": "3.0.1",
Expand Down
7 changes: 4 additions & 3 deletions src/components/Path/Path.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {useContext} from 'react';
import * as d3 from "d3";
import {rgb as d3rgb } from 'd3-color';
import {arc as d3arc } from 'd3-shape';
import {ThemeContext} from "../theme-context";
import PropTypes from "prop-types";

Expand All @@ -8,12 +9,12 @@ function Path(props) {
//context variables
const {fontSize, fontFamily, colorScale} = useContext(ThemeContext);

const rgb = d3.rgb(colorScale(props.quadIndex));
const rgb = d3rgb(colorScale(props.quadIndex));
const fill = rgb.brighter(props.ringIndex / props.ringsLength * 0.9);
const uniquePathId = props.quadIndex + "-" + props.ringIndex;

const archFunction = () => {
return d3.arc()
return d3arc()
.outerRadius(() => {
return props.outerRadius * props.ringWidth;
})
Expand Down
11 changes: 6 additions & 5 deletions src/components/Quadrant/Quadrant.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import PropTypes from "prop-types";
function Quadrant(props) {

//context variables
const {fontSize, fontFamily, colorScale} = useContext(ThemeContext);
const {fontSize, fontFamily, colorScale, quadrantsConfig :{ textMargin, textYOffset, showOnlyFirstQuadrantLabels }} = useContext(ThemeContext);

//optional variables
const radiusDiminishConstant = props.radiusDiminish;
Expand Down Expand Up @@ -88,16 +88,17 @@ function Quadrant(props) {
const ringsLength = props.rings.length;
const title = ringIndex === props.rings.length - 1 ? props.name : null;

const leftMargin = 40 * (radiuses[ringIndex + 1] - radiuses[ringIndex]);

const leftMargin = textMargin ?? (40 * (radiuses[ringIndex + 1] - radiuses[ringIndex]));
const showLabel = showOnlyFirstQuadrantLabels? props.index === 0 : true;
return (
<g key={props.index + "-" + ringIndex}>
<Text
{showLabel && <Text
name={ringValue}
dx={leftMargin + (radiuses[ringIndex] * ringWidth)}
dy={textYOffset}
fontSize={fontSize}
fontFamily={fontFamily}
/>
/>}
<Path
quadIndex={props.index}
ringIndex={ringIndex}
Expand Down
5 changes: 3 additions & 2 deletions src/components/Radar/Radar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function Radar(props) {
const {fontSize, fontFamily, colorScale} = useContext(ThemeContext);

//margin of radar
const margin = 5;
const margin = props.margin || 5;

//some internally used constants
const angle = 360 / props.quadrants.length;
Expand Down Expand Up @@ -203,7 +203,8 @@ function Radar(props) {
fontSize: props.fontSize || fontSize,
itemFontSize: props.itemFontSize || props.fontSize || fontSize,
fontFamily: props.fontFamily || fontFamily,
colorScale: props.colorScaleIndex ? getColorScale(props.colorScaleIndex) : colorScale
colorScale: props.colorScaleIndex ? getColorScale(props.colorScaleIndex) : colorScale,
quadrantsConfig : props.quadrantsConfig || {}
}}>
<RadarContents
width={width * RIGHT_EXTENSION}
Expand Down
1 change: 1 addition & 0 deletions src/components/Text/Text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ function Text(props) {
fontSize={fontSize}
fontFamily={fontFamily}
dx={props.dx}
dy={props.dy}
>
{props.name}
</TextWrapper>
Expand Down
8 changes: 5 additions & 3 deletions src/components/theme-context.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from "react";
import * as d3 from "d3";
import {scaleOrdinal} from "d3-scale";
import * as d3Scales from 'd3-scale-chromatic'

export const colorScales = [
{"name": "schemeCategory10"},
Expand All @@ -25,12 +26,13 @@ export function getColorScale(colorScaleIndex) {
return DEFAULT_COLOR_SCHEME_INDEX;
}

return d3.scaleOrdinal(d3[colorScales[colorScaleIndex].name]);
return scaleOrdinal(d3Scales[colorScales[colorScaleIndex].name]);
}

export const ThemeContext = React.createContext({
colorScale: DEFAULT_COLOR_SCALE,
fontFamily: DEFAULT_FONT_FAMILY,
fontSize: DEFAULT_FONT_SIZE,
itemFontSize: DEFAULT_FONT_SIZE
itemFontSize: DEFAULT_FONT_SIZE,
quadrantsConfig : {}
});
154 changes: 153 additions & 1 deletion src/stories/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,160 @@ storiesOf('Basics', module)
fontSize={18}
itemFontSize={12}
fontFamily={"fantasy"}/>
)})
.add('with custom margin', () => {

const state = {
rings: ['adopt', 'trial', 'assess', 'hold'],
quadrants: ['tools', 'techniques', 'platforms', 'languages'],
width: 550,
data: [
{
name: 'D3',
quadrant: 'tools',
ring: "assess"

},
{
name: 'TypeScript',
quadrant: 'languages',
ring: "trial"
},
{
name: 'Storybook',
quadrant: 'tools',
ring: "adopt"
}
]
};
return (
<Radar
margin={10}
width={state.width}
rings={state.rings}
quadrants={state.quadrants}
data={state.data}
fontFamily={"fantasy"}/>
)
});
}).add('with labels only on the first rim', () => {

const state = {
rings: ['adopt', 'trial', 'assess', 'hold'],
quadrants: ['tools', 'techniques', 'platforms', 'languages'],
width: 550,
data: [
{
name: 'D3',
quadrant: 'tools',
ring: "assess"

},
{
name: 'TypeScript',
quadrant: 'languages',
ring: "trial"
},
{
name: 'Storybook',
quadrant: 'tools',
ring: "adopt"
}
]
};
return (
<Radar
margin={10}
width={state.width}
rings={state.rings}
quadrants={state.quadrants}
data={state.data}
quadrantsConfig={{
showOnlyFirstQuadrantLabels : true
}}
fontFamily={"fantasy"}/>
)
})
.add('with labels only on the first rim and a y offset on the label', () => {

const state = {
rings: ['adopt', 'trial', 'assess', 'hold'],
quadrants: ['tools', 'techniques', 'platforms', 'languages'],
width: 550,
data: [
{
name: 'D3',
quadrant: 'tools',
ring: "assess"

},
{
name: 'TypeScript',
quadrant: 'languages',
ring: "trial"
},
{
name: 'Storybook',
quadrant: 'tools',
ring: "adopt"
}
]
};
return (
<Radar
margin={10}
width={state.width}
rings={state.rings}
quadrants={state.quadrants}
data={state.data}
quadrantsConfig={{
showOnlyFirstQuadrantLabels : true,
textYOffset : -5
}}
fontFamily={"fantasy"}/>
)
})
.add('with a custom text margin', () => {

const state = {
rings: ['adopt', 'trial', 'assess', 'hold'],
quadrants: ['tools', 'techniques', 'platforms', 'languages'],
width: 550,
data: [
{
name: 'D3',
quadrant: 'tools',
ring: "assess"

},
{
name: 'TypeScript',
quadrant: 'languages',
ring: "trial"
},
{
name: 'Storybook',
quadrant: 'tools',
ring: "adopt"
}
]
};
return (
<Radar
margin={10}
width={state.width}
rings={state.rings}
quadrants={state.quadrants}
data={state.data}
quadrantsConfig={{
showOnlyFirstQuadrantLabels : true,
textMargin : 0,
textYOffset : -5


}}
fontFamily={"fantasy"}/>
)
})


const colorSchemeStoryHandler = (schemeIndex) => () => {
Expand Down
Loading

0 comments on commit 40f0ed7

Please sign in to comment.