From 8aa7fa86bf5121cf24cf318660981d03ad6cd56a Mon Sep 17 00:00:00 2001 From: Billy Cole Date: Sat, 28 May 2022 13:55:06 -0400 Subject: [PATCH] Additional styling changes. --- src/App/helpers.js | 8 + src/App/index.js | 11 +- src/App/styledComponents.js | 7 + src/BasicCharts/AreaStack/index.js | 2 +- src/BasicCharts/Bar/index.js | 5 +- src/BasicCharts/BarGrouped/index.js | 5 +- src/BasicCharts/BarGroupedStack/index.js | 5 +- src/BasicCharts/BarHorizontal/index.js | 5 +- src/BasicCharts/BarHorizontalStack/index.js | 5 +- .../BarHorizontalStackNegative/index.js | 5 +- src/BasicCharts/BarNegative/index.js | 5 +- src/BasicCharts/BarStack/index.js | 5 +- src/BasicCharts/MultiLine/index.js | 5 +- src/BasicCharts/styledComponents.js | 2 - .../AreaStack/styledComponents.js | 5 - src/ChartTemplates/Bar/styledComponents.js | 4 - .../BarGrouped/styledComponents.js | 4 - .../BarGroupedStack/styledComponents.js | 4 - .../BarHorizontal/styledComponents.js | 6 +- .../BarHorizontalStack/index.js | 190 +++++---- .../BarHorizontalStack/styledComponents.js | 9 - .../styledComponents.js | 6 +- src/ChartTemplates/BarLine/index.js | 324 ++++++++------- .../BarLine/styledComponents.js | 12 +- .../BarNegative/styledComponents.js | 6 +- .../BarStack/styledComponents.js | 4 - .../BarStackLine/styledComponents.js | 6 +- .../BarThreshold/styledComponents.js | 4 - src/ChartTemplates/LineDualAxis/index.js | 383 +++++++++--------- .../LineDualAxis/styledComponents.js | 12 +- src/ChartTemplates/MultiLine/index.js | 342 ++++++++-------- .../MultiLine/styledComponents.js | 12 +- src/ChartTemplates/Pie/styledComponents.js | 6 +- src/ChartTemplates/PieHollow/index.js | 2 +- .../PieHollow/styledComponents.js | 6 +- src/EventExamples/styledComponents.js | 2 - 36 files changed, 684 insertions(+), 740 deletions(-) create mode 100644 src/App/helpers.js diff --git a/src/App/helpers.js b/src/App/helpers.js new file mode 100644 index 0000000..d1a0981 --- /dev/null +++ b/src/App/helpers.js @@ -0,0 +1,8 @@ +export const getPaddingVal = (chartName) => { + const nameChars = chartName.slice(-4); + if (nameChars === 'asic') { + return '0'; + } + + return nameChars === 'late' ? '30px' : '20px'; +}; diff --git a/src/App/index.js b/src/App/index.js index d11a380..d0af8f0 100644 --- a/src/App/index.js +++ b/src/App/index.js @@ -2,7 +2,12 @@ import React, { useState } from 'react'; import SelectMenu from './SelectMenu'; import { chartDict } from './constants'; -import { AppContainer, AppSubcontainer } from './styledComponents'; +import { getPaddingVal } from './helpers'; +import { + AppContainer, + AppSubcontainer, + ChartContainer, +} from './styledComponents'; const App = () => { // string passed here determines which chart shows on page load (refer to chartDict constant) @@ -12,7 +17,9 @@ const App = () => { - {chartDict[activeChart]} + + {chartDict[activeChart]} + ); diff --git a/src/App/styledComponents.js b/src/App/styledComponents.js index 1165716..409f10a 100644 --- a/src/App/styledComponents.js +++ b/src/App/styledComponents.js @@ -14,6 +14,13 @@ export const AppSubcontainer = styled.div` flex-direction: column; `; +export const ChartContainer = styled.div` + background-color: white; + box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.5); + margin-top: 40px; + padding: ${({ paddingVal }) => paddingVal}; +`; + export const SelectMenuContainer = styled.div` display: flex; height: 40px; diff --git a/src/BasicCharts/AreaStack/index.js b/src/BasicCharts/AreaStack/index.js index 91f16bd..e18de82 100644 --- a/src/BasicCharts/AreaStack/index.js +++ b/src/BasicCharts/AreaStack/index.js @@ -9,7 +9,7 @@ import { ChartWrapper } from '../styledComponents'; const AreaStack = () => ( - + diff --git a/src/BasicCharts/Bar/index.js b/src/BasicCharts/Bar/index.js index a4b2192..08c0329 100644 --- a/src/BasicCharts/Bar/index.js +++ b/src/BasicCharts/Bar/index.js @@ -8,7 +8,10 @@ import { ChartWrapper } from '../styledComponents'; const Bar = () => ( - + ( - + diff --git a/src/BasicCharts/BarGroupedStack/index.js b/src/BasicCharts/BarGroupedStack/index.js index c3b3178..7b5da51 100644 --- a/src/BasicCharts/BarGroupedStack/index.js +++ b/src/BasicCharts/BarGroupedStack/index.js @@ -10,7 +10,10 @@ import { ChartWrapper } from '../styledComponents'; const BarGroupedStack = () => ( - + diff --git a/src/BasicCharts/BarHorizontal/index.js b/src/BasicCharts/BarHorizontal/index.js index 326214d..47126d1 100644 --- a/src/BasicCharts/BarHorizontal/index.js +++ b/src/BasicCharts/BarHorizontal/index.js @@ -8,7 +8,10 @@ import { ChartWrapper } from '../styledComponents'; const BarHorizontal = () => ( - + ( - + diff --git a/src/BasicCharts/BarHorizontalStackNegative/index.js b/src/BasicCharts/BarHorizontalStackNegative/index.js index 7396a31..26e54bb 100644 --- a/src/BasicCharts/BarHorizontalStackNegative/index.js +++ b/src/BasicCharts/BarHorizontalStackNegative/index.js @@ -9,7 +9,10 @@ import { ChartWrapper } from '../styledComponents'; const BarHorizontalStackNegative = () => ( - + diff --git a/src/BasicCharts/BarNegative/index.js b/src/BasicCharts/BarNegative/index.js index 063676f..1fbce28 100644 --- a/src/BasicCharts/BarNegative/index.js +++ b/src/BasicCharts/BarNegative/index.js @@ -8,7 +8,10 @@ import { ChartWrapper } from '../styledComponents'; const BarNegative = () => ( - + ( - + diff --git a/src/BasicCharts/MultiLine/index.js b/src/BasicCharts/MultiLine/index.js index 18affd7..46a206a 100644 --- a/src/BasicCharts/MultiLine/index.js +++ b/src/BasicCharts/MultiLine/index.js @@ -8,7 +8,10 @@ import { ChartWrapper } from '../styledComponents'; const MultiLine = () => ( - + y} diff --git a/src/BasicCharts/styledComponents.js b/src/BasicCharts/styledComponents.js index 1bcee28..75e5d9d 100644 --- a/src/BasicCharts/styledComponents.js +++ b/src/BasicCharts/styledComponents.js @@ -1,7 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - margin: 40px; width: 800px; `; diff --git a/src/ChartTemplates/AreaStack/styledComponents.js b/src/ChartTemplates/AreaStack/styledComponents.js index 787588a..6f4bf64 100644 --- a/src/ChartTemplates/AreaStack/styledComponents.js +++ b/src/ChartTemplates/AreaStack/styledComponents.js @@ -1,10 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 324px; - margin-top: 40px; width: 1200px; - padding: 10px; - box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.5); `; diff --git a/src/ChartTemplates/Bar/styledComponents.js b/src/ChartTemplates/Bar/styledComponents.js index 0451eed..6f4bf64 100644 --- a/src/ChartTemplates/Bar/styledComponents.js +++ b/src/ChartTemplates/Bar/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 373px; - margin-top: 40px; - padding: 10px; width: 1200px; `; diff --git a/src/ChartTemplates/BarGrouped/styledComponents.js b/src/ChartTemplates/BarGrouped/styledComponents.js index 0451eed..6f4bf64 100644 --- a/src/ChartTemplates/BarGrouped/styledComponents.js +++ b/src/ChartTemplates/BarGrouped/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 373px; - margin-top: 40px; - padding: 10px; width: 1200px; `; diff --git a/src/ChartTemplates/BarGroupedStack/styledComponents.js b/src/ChartTemplates/BarGroupedStack/styledComponents.js index 0451eed..6f4bf64 100644 --- a/src/ChartTemplates/BarGroupedStack/styledComponents.js +++ b/src/ChartTemplates/BarGroupedStack/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 373px; - margin-top: 40px; - padding: 10px; width: 1200px; `; diff --git a/src/ChartTemplates/BarHorizontal/styledComponents.js b/src/ChartTemplates/BarHorizontal/styledComponents.js index eacf2ae..6f4bf64 100644 --- a/src/ChartTemplates/BarHorizontal/styledComponents.js +++ b/src/ChartTemplates/BarHorizontal/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 304px; - margin-top: 40px; - padding: 10px; - width: 1100px; + width: 1200px; `; diff --git a/src/ChartTemplates/BarHorizontalStack/index.js b/src/ChartTemplates/BarHorizontalStack/index.js index fb1605b..37008e1 100644 --- a/src/ChartTemplates/BarHorizontalStack/index.js +++ b/src/ChartTemplates/BarHorizontalStack/index.js @@ -12,7 +12,7 @@ import { VictoryStack } from 'victory-stack'; import { data } from './constants'; import { getBarProps } from './helpers'; -import { ChartContent, ChartWrapper } from './styledComponents'; +import { ChartWrapper } from './styledComponents'; const BarHorizontalStack = ({ data: { @@ -30,104 +30,102 @@ const BarHorizontalStack = ({ return ( - - - + + + - - - - - - - - - focusedIndex !== -1 && focusedIndex !== index - ? 'rgba(0, 0, 0, 0.3)' - : 'rgba(0, 0, 0, 1)', - fontSize: '6px', - }} - textAnchor="start" - x={4} - /> - } - tickValues={yAxisValues} + + - - - + + + + focusedIndex !== -1 && focusedIndex !== index + ? 'rgba(0, 0, 0, 0.3)' + : 'rgba(0, 0, 0, 1)', + fontSize: '6px', + }} + textAnchor="start" + x={4} + /> + } + tickValues={yAxisValues} + /> + + ); }; diff --git a/src/ChartTemplates/BarHorizontalStack/styledComponents.js b/src/ChartTemplates/BarHorizontalStack/styledComponents.js index 1724c57..6f4bf64 100644 --- a/src/ChartTemplates/BarHorizontalStack/styledComponents.js +++ b/src/ChartTemplates/BarHorizontalStack/styledComponents.js @@ -1,14 +1,5 @@ import styled from 'styled-components'; -export const ChartContent = styled.div` - bottom: 16px; - margin: 36px; - position: relative; -`; - export const ChartWrapper = styled.div` - background-color: white; - height: 584px; - margin-top: 40px; width: 1200px; `; diff --git a/src/ChartTemplates/BarHorizontalStackNegative/styledComponents.js b/src/ChartTemplates/BarHorizontalStackNegative/styledComponents.js index 5196b10..434f0a4 100644 --- a/src/ChartTemplates/BarHorizontalStackNegative/styledComponents.js +++ b/src/ChartTemplates/BarHorizontalStackNegative/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 607px; - margin-top: 40px; - padding: 10px; - width: 410px; + width: 400px; `; diff --git a/src/ChartTemplates/BarLine/index.js b/src/ChartTemplates/BarLine/index.js index b88eed3..ab77bef 100644 --- a/src/ChartTemplates/BarLine/index.js +++ b/src/ChartTemplates/BarLine/index.js @@ -15,7 +15,7 @@ import BarLabel from './BarLabel'; import LineLabel from './LineLabel'; import { data, layoutProps } from './constants'; import { handleClick, handleMouseOut, handleMouseOver } from './helpers'; -import { ChartContent, ChartWrapper } from './styledComponents'; +import { ChartWrapper } from './styledComponents'; const BarLine = ({ data: { barData, lineData, maxBarVal, maxLineVal, minLineVal, xAxisValues }, @@ -27,173 +27,167 @@ const BarLine = ({ return ( - - - - index === 0 ? 'transparent' : '#dcdcdc', - transform: 'translateX(-15.3px)', - }} - /> - } - style={{ - axis: { stroke: '#dcdcdc' }, - tickLabels: { fill: 'transparent', pointerEvents: 'none' }, - }} - tickValues={xAxisValues} - /> - - handleClick('bar', { - barFocused, - focusedIndex, - lineFocused, - setBarFocused, - setFocusedIndex, - setLineFocused, - }), - onMouseOut: handleMouseOut, - onMouseOver: handleMouseOver, - }, - target: 'data', - }, - ]} - labelComponent={} - labels={({ datum: { y } }) => y} - style={{ - data: { - fill: '#4e78a7', - opacity: ({ index }) => - lineFocused || (barFocused && index !== focusedIndex) - ? 0.3 - : 1, - }, - }} - /> - (barFocused ? 0.3 : 1), + + - - index === hoveredIndex || (lineFocused && index === focusedIndex) - ? 2 - : 1.5 - } - style={{ - data: { - fill: '#ee8d2d', - opacity: ({ index }) => - barFocused || (lineFocused && index !== focusedIndex) - ? 0.3 - : 1, + stroke: ({ index }) => + index === 0 ? 'transparent' : '#dcdcdc', + transform: 'translateX(-15.3px)', + }} + /> + } + style={{ + axis: { stroke: '#dcdcdc' }, + tickLabels: { fill: 'transparent', pointerEvents: 'none' }, + }} + tickValues={xAxisValues} + /> + + handleClick('bar', { + barFocused, + focusedIndex, + lineFocused, + setBarFocused, + setFocusedIndex, + setLineFocused, + }), + onMouseOut: handleMouseOut, + onMouseOver: handleMouseOver, }, - }} - /> - - handleClick('line', { - barFocused, - focusedIndex, - lineFocused, - setBarFocused, - setFocusedIndex, - setLineFocused, - }), - onMouseOut: handleMouseOut, - onMouseOver: handleMouseOver, - }, - target: 'data', + target: 'data', + }, + ]} + labelComponent={} + labels={({ datum: { y } }) => y} + style={{ + data: { + fill: '#4e78a7', + opacity: ({ index }) => + lineFocused || (barFocused && index !== focusedIndex) ? 0.3 : 1, + }, + }} + /> + (barFocused ? 0.3 : 1), + pointerEvents: 'none', + stroke: '#ee8d2d', + strokeWidth: 1.5, + }, + }} + /> + + index === hoveredIndex || (lineFocused && index === focusedIndex) + ? 2 + : 1.5 + } + style={{ + data: { + fill: '#ee8d2d', + opacity: ({ index }) => + barFocused || (lineFocused && index !== focusedIndex) ? 0.3 : 1, + }, + }} + /> + + handleClick('line', { + barFocused, + focusedIndex, + lineFocused, + setBarFocused, + setFocusedIndex, + setLineFocused, + }), + onMouseOut: handleMouseOut, + onMouseOver: handleMouseOver, }, - ]} - labelComponent={ - - } - labels={({ datum: { y } }) => `${y}%`} - size={8} - style={{ data: { fill: 'transparent' } }} - /> - - focusedIndex !== -1 && focusedIndex !== index - ? 'rgba(0, 0, 0, 0.3)' - : 'rgba(0, 0, 0, 1)', - fontSize: '5.5px', - }} - /> - } - tickValues={xAxisValues} - /> - - } - domain={[minLineVal, maxLineVal]} - label="Line Metric" - orientation="right" - style={{ axis: { stroke: '#dcdcdc' } }} - tickFormat={(t) => `${t}%`} - tickLabelComponent={ - - } - /> - - } - domain={[0, maxBarVal]} - label="Bar Metric" - orientation="left" - style={{ axis: { stroke: '#dcdcdc' } }} - tickLabelComponent={ - - } - /> - - + target: 'data', + }, + ]} + labelComponent={ + + } + labels={({ datum: { y } }) => `${y}%`} + size={8} + style={{ data: { fill: 'transparent' } }} + /> + + focusedIndex !== -1 && focusedIndex !== index + ? 'rgba(0, 0, 0, 0.3)' + : 'rgba(0, 0, 0, 1)', + fontSize: '5.5px', + }} + /> + } + tickValues={xAxisValues} + /> + + } + domain={[minLineVal, maxLineVal]} + label="Line Metric" + orientation="right" + style={{ axis: { stroke: '#dcdcdc' } }} + tickFormat={(t) => `${t}%`} + tickLabelComponent={ + + } + /> + + } + domain={[0, maxBarVal]} + label="Bar Metric" + orientation="left" + style={{ axis: { stroke: '#dcdcdc' } }} + tickLabelComponent={ + + } + /> + ); }; diff --git a/src/ChartTemplates/BarLine/styledComponents.js b/src/ChartTemplates/BarLine/styledComponents.js index 0851c0f..6f4bf64 100644 --- a/src/ChartTemplates/BarLine/styledComponents.js +++ b/src/ChartTemplates/BarLine/styledComponents.js @@ -1,15 +1,5 @@ import styled from 'styled-components'; -export const ChartContent = styled.div` - padding: 14px; - position: relative; - top: 16px; -`; - export const ChartWrapper = styled.div` - background-color: white; - height: 536px; - margin-top: 40px; - padding: 10px; - width: 1180px; + width: 1200px; `; diff --git a/src/ChartTemplates/BarNegative/styledComponents.js b/src/ChartTemplates/BarNegative/styledComponents.js index d4737a1..6f4bf64 100644 --- a/src/ChartTemplates/BarNegative/styledComponents.js +++ b/src/ChartTemplates/BarNegative/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 344px; - margin-top: 40px; - padding: 10px; - width: 1180px; + width: 1200px; `; diff --git a/src/ChartTemplates/BarStack/styledComponents.js b/src/ChartTemplates/BarStack/styledComponents.js index 597ed15..6f4bf64 100644 --- a/src/ChartTemplates/BarStack/styledComponents.js +++ b/src/ChartTemplates/BarStack/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 508px; - margin-top: 40px; - padding: 10px; width: 1200px; `; diff --git a/src/ChartTemplates/BarStackLine/styledComponents.js b/src/ChartTemplates/BarStackLine/styledComponents.js index 6919abf..6f4bf64 100644 --- a/src/ChartTemplates/BarStackLine/styledComponents.js +++ b/src/ChartTemplates/BarStackLine/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 536px; - margin-top: 40px; - padding: 10px; - width: 1180px; + width: 1200px; `; diff --git a/src/ChartTemplates/BarThreshold/styledComponents.js b/src/ChartTemplates/BarThreshold/styledComponents.js index 96b4b70..6f4bf64 100644 --- a/src/ChartTemplates/BarThreshold/styledComponents.js +++ b/src/ChartTemplates/BarThreshold/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 349px; - margin-top: 40px; - padding: 10px; width: 1200px; `; diff --git a/src/ChartTemplates/LineDualAxis/index.js b/src/ChartTemplates/LineDualAxis/index.js index 62d6238..22b820e 100644 --- a/src/ChartTemplates/LineDualAxis/index.js +++ b/src/ChartTemplates/LineDualAxis/index.js @@ -19,7 +19,7 @@ import { handleMouseOut, handleMouseOver, } from './helpers'; -import { ChartContent, ChartWrapper } from './styledComponents'; +import { ChartWrapper } from './styledComponents'; const LineDualAxis = ({ data: { @@ -39,204 +39,201 @@ const LineDualAxis = ({ return ( - - - - } - labels={() => ''} - style={{ - data: { - opacity: focusedLine && focusedLine !== 'percentage' ? 0.3 : 1, - stroke: 'grey', - strokeWidth: 2, - }, - }} - /> - - getPointColor({ + + + } + labels={() => ''} + style={{ + data: { + opacity: focusedLine && focusedLine !== 'percentage' ? 0.3 : 1, + stroke: 'grey', + strokeWidth: 2, + }, + }} + /> + + getPointColor({ + focusedIndex, + focusedLine, + hoveredIndex, + hoveredLine, + index, + lineId: 'percentage', + }), + opacity: focusedLine && focusedLine !== 'percentage' ? 0.3 : 1, + }, + labels: { fill: 'transparent', pointerEvents: 'none' }, + }} + /> + + } + labels={() => ''} + style={{ + data: { + opacity: focusedLine && focusedLine !== 'number' ? 0.3 : 1, + stroke: '#1b78b5', + strokeWidth: 5, + }, + }} + /> + + (focusedLine === 'number' && focusedIndex === index) || + (hoveredLine === 'number' && hoveredIndex === index) + ? 5 + : 4 + } + style={{ + data: { + fill: ({ index }) => + focusedLine === 'number' && focusedIndex === index + ? 'black' + : '#1b78b5', + opacity: focusedLine && focusedLine !== 'number' ? 0.3 : 1, + }, + labels: { fill: 'transparent', pointerEvents: 'none' }, + }} + /> + + handleClick({ focusedIndex, focusedLine, - hoveredIndex, - hoveredLine, - index, lineId: 'percentage', + setFocusedIndex, + setFocusedLine, }), - opacity: focusedLine && focusedLine !== 'percentage' ? 0.3 : 1, - }, - labels: { fill: 'transparent', pointerEvents: 'none' }, - }} - /> - - } - labels={() => ''} - style={{ - data: { - opacity: focusedLine && focusedLine !== 'number' ? 0.3 : 1, - stroke: '#1b78b5', - strokeWidth: 5, - }, - }} - /> - - (focusedLine === 'number' && focusedIndex === index) || - (hoveredLine === 'number' && hoveredIndex === index) - ? 5 - : 4 - } - style={{ - data: { - fill: ({ index }) => - focusedLine === 'number' && focusedIndex === index - ? 'black' - : '#1b78b5', - opacity: focusedLine && focusedLine !== 'number' ? 0.3 : 1, - }, - labels: { fill: 'transparent', pointerEvents: 'none' }, - }} - /> - - handleClick({ - focusedIndex, - focusedLine, - lineId: 'percentage', - setFocusedIndex, - setFocusedLine, - }), - onMouseOut: () => - handleMouseOut(setHoveredIndex, setHoveredLine), - onMouseOver: () => - handleMouseOver( - 'percentage', - setHoveredIndex, - setHoveredLine, - ), - }, - target: 'data', - }, - ]} - labelComponent={} - labels={() => ''} - size={10} - style={{ - data: { fill: 'transparent' }, - labels: { fill: 'transparent', pointerEvents: 'none' }, - }} - /> - - handleClick({ - focusedIndex, - focusedLine, - lineId: 'number', - setFocusedIndex, - setFocusedLine, - }), - onMouseOut: () => - handleMouseOut(setHoveredIndex, setHoveredLine), - onMouseOver: () => - handleMouseOver('number', setHoveredIndex, setHoveredLine), - }, - target: 'data', + onMouseOut: () => + handleMouseOut(setHoveredIndex, setHoveredLine), + onMouseOver: () => + handleMouseOver( + 'percentage', + setHoveredIndex, + setHoveredLine, + ), }, - ]} - labelComponent={} - labels={() => ''} - size={10} - style={{ - data: { fill: 'transparent' }, - labels: { fill: 'transparent', pointerEvents: 'none' }, - }} - /> - - index % 2 === 0 ? '#aaaaaa' : 'transparent', - fontSize: '12px', - pointerEvents: 'none', - }, - ticks: { - size: ({ index }) => (index % 2 === 0 ? 4 : 2), - stroke: ({ index }) => - index % 2 === 0 ? '#dcdcdc' : '#e3e3e3', + target: 'data', + }, + ]} + labelComponent={} + labels={() => ''} + size={10} + style={{ + data: { fill: 'transparent' }, + labels: { fill: 'transparent', pointerEvents: 'none' }, + }} + /> + + handleClick({ + focusedIndex, + focusedLine, + lineId: 'number', + setFocusedIndex, + setFocusedLine, + }), + onMouseOut: () => + handleMouseOut(setHoveredIndex, setHoveredLine), + onMouseOver: () => + handleMouseOver('number', setHoveredIndex, setHoveredLine), }, - }} - tickValues={xAxisValues} - /> - `${t}.00%`} - tickLabelComponent={ - - } - /> - - } - /> - - + target: 'data', + }, + ]} + labelComponent={} + labels={() => ''} + size={10} + style={{ + data: { fill: 'transparent' }, + labels: { fill: 'transparent', pointerEvents: 'none' }, + }} + /> + + index % 2 === 0 ? '#aaaaaa' : 'transparent', + fontSize: '12px', + pointerEvents: 'none', + }, + ticks: { + size: ({ index }) => (index % 2 === 0 ? 4 : 2), + stroke: ({ index }) => (index % 2 === 0 ? '#dcdcdc' : '#e3e3e3'), + }, + }} + tickValues={xAxisValues} + /> + `${t}.00%`} + tickLabelComponent={ + + } + /> + + } + /> + ); }; diff --git a/src/ChartTemplates/LineDualAxis/styledComponents.js b/src/ChartTemplates/LineDualAxis/styledComponents.js index 6634f04..838197f 100644 --- a/src/ChartTemplates/LineDualAxis/styledComponents.js +++ b/src/ChartTemplates/LineDualAxis/styledComponents.js @@ -2,18 +2,8 @@ import styled from 'styled-components'; import { Tooltip } from '@material-ui/core'; import { withStyles } from '@material-ui/core/styles'; -export const ChartContent = styled.div` - padding: 14px; - position: relative; - top: 16px; -`; - export const ChartWrapper = styled.div` - background-color: white; - height: 300px; - margin-top: 40px; - padding: 10px; - width: 610px; + width: 720px; `; export const LabelTooltip = withStyles(() => ({ diff --git a/src/ChartTemplates/MultiLine/index.js b/src/ChartTemplates/MultiLine/index.js index cbcfeb3..cd4f5cf 100644 --- a/src/ChartTemplates/MultiLine/index.js +++ b/src/ChartTemplates/MultiLine/index.js @@ -17,7 +17,7 @@ import ScatterPoint from './ScatterPoint'; import VoronoiLabel from './VoronoiLabel'; import { data, voronoiBlacklist } from './constants'; import { onVoronoiActivated, onVoronoiDeactivated } from './helpers'; -import { ChartContent, ChartWrapper } from './styledComponents'; +import { ChartWrapper } from './styledComponents'; const MultiLine = ({ data: { lineAData, lineBData, lineCData, xAxisValues }, @@ -39,181 +39,179 @@ const MultiLine = ({ return ( - - } - labels={() => 'foo'} - onActivated={(points) => - onVoronoiActivated(points, setHoveredIndex, setHoveredLine) - } - onDeactivated={(points) => - onVoronoiDeactivated(points, setHoveredIndex, setHoveredLine) - } - radius={10} - voronoiBlacklist={voronoiBlacklist} - /> - } - domainPadding={15} - height={110} - padding={{ bottom: 13.75, left: 34, right: -4.5, top: 3.5 }} - > - - } + } labels={() => 'foo'} - name="line-c" - style={{ - data: { - opacity: - focusedLine && focusedLine !== 'chart-scatter-2' ? 0.3 : 1, - stroke: '#004991', - strokeWidth: 1, - }, - }} - /> - - + onActivated={(points) => + onVoronoiActivated(points, setHoveredIndex, setHoveredLine) } - /> - - } - labels={() => 'foo'} - name="line-b" - style={{ - data: { - opacity: - focusedLine && focusedLine !== 'chart-scatter-5' ? 0.3 : 1, - stroke: '#678cb1', - strokeWidth: 1, - }, - }} - /> - - + onDeactivated={(points) => + onVoronoiDeactivated(points, setHoveredIndex, setHoveredLine) } + radius={10} + voronoiBlacklist={voronoiBlacklist} /> - - } - name="line-a" - labels={() => 'foo'} - style={{ - data: { - opacity: - focusedLine && focusedLine !== 'chart-scatter-8' ? 0.3 : 1, - stroke: '#c6e4f4', - strokeWidth: 1, - }, - }} - /> - - - } - /> - - focusedIndex !== -1 && index !== focusedIndex - ? 'rgba(0, 0, 0, 0.3)' - : 'rgba(0, 0, 0, 1)', - fontSize: '6px', - }} - /> - } - tickValues={xAxisValues} - /> - - } - dependentAxis - label="Y Axis Metric" - style={{ - axis: { stroke: '#dcdcdc' }, - ticks: { size: 2, stroke: '#dcdcdc' }, - }} - tickLabelComponent={ - - } - /> - - + } + domainPadding={15} + height={110} + padding={{ bottom: 13.75, left: 36, right: 12, top: 8 }} + > + + } + labels={() => 'foo'} + name="line-c" + style={{ + data: { + opacity: + focusedLine && focusedLine !== 'chart-scatter-2' ? 0.3 : 1, + stroke: '#004991', + strokeWidth: 1, + }, + }} + /> + + + } + /> + + } + labels={() => 'foo'} + name="line-b" + style={{ + data: { + opacity: + focusedLine && focusedLine !== 'chart-scatter-5' ? 0.3 : 1, + stroke: '#678cb1', + strokeWidth: 1, + }, + }} + /> + + + } + /> + + } + name="line-a" + labels={() => 'foo'} + style={{ + data: { + opacity: + focusedLine && focusedLine !== 'chart-scatter-8' ? 0.3 : 1, + stroke: '#c6e4f4', + strokeWidth: 1, + }, + }} + /> + + + } + /> + + focusedIndex !== -1 && index !== focusedIndex + ? 'rgba(0, 0, 0, 0.3)' + : 'rgba(0, 0, 0, 1)', + fontSize: '6px', + }} + /> + } + tickValues={xAxisValues} + /> + + } + dependentAxis + label="Y Axis Metric" + style={{ + axis: { stroke: '#dcdcdc' }, + ticks: { size: 2, stroke: '#dcdcdc' }, + }} + tickLabelComponent={ + + } + /> + ); }; diff --git a/src/ChartTemplates/MultiLine/styledComponents.js b/src/ChartTemplates/MultiLine/styledComponents.js index e7cbbc1..853f5fb 100644 --- a/src/ChartTemplates/MultiLine/styledComponents.js +++ b/src/ChartTemplates/MultiLine/styledComponents.js @@ -2,18 +2,8 @@ import styled from 'styled-components'; import { Tooltip } from '@material-ui/core'; import { withStyles } from '@material-ui/core/styles'; -export const ChartContent = styled.div` - padding: 14px 40px; - position: relative; - right: 16px; - top: 16px; -`; - export const ChartWrapper = styled.div` - background-color: white; - height: 300px; - margin-top: 40px; - width: 1100px; + width: 1200px; `; export const LabelTooltip = withStyles(() => ({ diff --git a/src/ChartTemplates/Pie/styledComponents.js b/src/ChartTemplates/Pie/styledComponents.js index 785b887..434f0a4 100644 --- a/src/ChartTemplates/Pie/styledComponents.js +++ b/src/ChartTemplates/Pie/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 430px; - margin-top: 40px; - padding: 10px; - width: 430px; + width: 400px; `; diff --git a/src/ChartTemplates/PieHollow/index.js b/src/ChartTemplates/PieHollow/index.js index e34fb77..b52e9b1 100644 --- a/src/ChartTemplates/PieHollow/index.js +++ b/src/ChartTemplates/PieHollow/index.js @@ -65,7 +65,7 @@ const PieHollow = ({ data: { pieData, totalCount } }) => { height={140} innerRadius={52} labelComponent={} - padding={0} + padding={5} standalone={false} width={140} /> diff --git a/src/ChartTemplates/PieHollow/styledComponents.js b/src/ChartTemplates/PieHollow/styledComponents.js index 7d5fa72..434f0a4 100644 --- a/src/ChartTemplates/PieHollow/styledComponents.js +++ b/src/ChartTemplates/PieHollow/styledComponents.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - height: 240px; - margin-top: 40px; - padding: 10px; - width: 240px; + width: 400px; `; diff --git a/src/EventExamples/styledComponents.js b/src/EventExamples/styledComponents.js index 1bcee28..75e5d9d 100644 --- a/src/EventExamples/styledComponents.js +++ b/src/EventExamples/styledComponents.js @@ -1,7 +1,5 @@ import styled from 'styled-components'; export const ChartWrapper = styled.div` - background-color: white; - margin: 40px; width: 800px; `;