Skip to content

Commit

Permalink
Merge pull request wso2#1085 from pahans/summarize-pie-chart
Browse files Browse the repository at this point in the history 
Summarize pie charts when slices count is high
  • Loading branch information
Pahan Sarathchandra authored Mar 20, 2020
2 parents 6281a32 + 84d3f97 commit ef966bb
Show file tree
Hide file tree
Showing 12 changed files with 218 additions and 189 deletions.
59 changes: 17 additions & 42 deletions components/org.wso2.analytics.apim.widgets/APIMAppApiUsage/src/APIMAppApiUsage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import sumBy from 'lodash/sumBy';
import {
VictoryPie, VictoryLegend, VictoryTooltip, VictoryTheme,
} from 'victory';
import { colorScale, Utils } from '@analytics-apim/common-lib';
import CustomTable from './CustomTable';

/**
Expand All @@ -43,7 +44,7 @@ import CustomTable from './CustomTable';
*/
export default function APIMAppApiUsage(props) {
const {
themeName, height, width, limit, applicationSelected, usageData, legendData, applicationList,
themeName, height, width, limit, applicationSelected, usageData, applicationList,
applicationSelectedHandleChange, handleLimitChange, inProgress,
} = props;
const fontSize = width < 1000 ? 25 : 18;
Expand Down Expand Up @@ -140,6 +141,7 @@ export default function APIMAppApiUsage(props) {
},
};

const { pieChartData, legendData } = Utils.summarizePieData(usageData, 'apiName', 'hits');
return (
<Scrollbars style={{
height,
Expand Down Expand Up @@ -235,6 +237,17 @@ export default function APIMAppApiUsage(props) {
<div style={styles.statDiv}>
<div style={styles.pieDiv}>
<svg viewBox='-50 0 1000 500'>
<VictoryLegend
standalone={false}
theme={VictoryTheme.material}
colorScale={colorScale}
x={460}
y={20}
gutter={20}
rowGutter={styles.rowGutter}
style={styles.victoryLegend}
data={legendData}
/>
<VictoryPie
labelComponent={(
<VictoryTooltip
Expand All @@ -252,49 +265,12 @@ export default function APIMAppApiUsage(props) {
standalone={false}
padding={50}
theme={VictoryTheme.material}
colorScale={
[
'#45b29d',
'#ff9800',
'#b71c1c',
'#3f51b5',
'#673ab7',
'#00bcd4',
'#cddc39',
'#3e2723',
'#607d8b',
'#e91e63',
]
}
data={usageData}
colorScale={colorScale}
data={pieChartData}
x={d => d.apiName}
y={d => d.hits}
labels={d => `${d.apiName} : ${((d.hits
/ (sumBy(usageData, o => o.hits))) * 100).toFixed(2)}%`}
/>
<VictoryLegend
standalone={false}
theme={VictoryTheme.material}
colorScale={
[
'#45b29d',
'#ff9800',
'#b71c1c',
'#3f51b5',
'#673ab7',
'#00bcd4',
'#cddc39',
'#3e2723',
'#607d8b',
'#e91e63',
]
}
x={460}
y={20}
gutter={20}
rowGutter={styles.rowGutter}
style={styles.victoryLegend}
data={legendData}
/ (sumBy(pieChartData, o => o.hits))) * 100).toFixed(2)}%`}
/>
</svg>
</div>
Expand Down Expand Up @@ -342,7 +318,6 @@ APIMAppApiUsage.propTypes = {
applicationSelected: PropTypes.number.isRequired,
applicationList: PropTypes.instanceOf(Object).isRequired,
usageData: PropTypes.instanceOf(Object).isRequired,
legendData: PropTypes.instanceOf(Object).isRequired,
applicationSelectedHandleChange: PropTypes.func.isRequired,
handleLimitChange: PropTypes.func.isRequired,
inProgress: PropTypes.bool.isRequired,
Expand Down
34 changes: 17 additions & 17 deletions ...nts/org.wso2.analytics.apim.widgets/APIMRegisteredAppUsers/src/APIMRegisteredAppUsers.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import sumBy from 'lodash/sumBy';
import {
VictoryPie, VictoryLegend, VictoryTooltip, VictoryTheme,
} from 'victory';
import { colorScale } from '@analytics-apim/common-lib';
import { colorScale, Utils } from '@analytics-apim/common-lib';
import CustomTable from './CustomTable';

/**
Expand All @@ -38,7 +38,7 @@ import CustomTable from './CustomTable';
*/
export default function APIMRegisteredAppUsers(props) {
const {
themeName, height, width, usageData, legendData, inProgress,
themeName, height, width, usageData = [], inProgress,
} = props;
const fontSize = width < 1000 ? 25 : 18;
const styles = {
Expand Down Expand Up @@ -110,6 +110,7 @@ export default function APIMRegisteredAppUsers(props) {
strokeWidth: 1,
},
};
const { pieChartData, legendData } = Utils.summarizePieData(usageData, 'applicationName', 'users');

return (
<Scrollbars style={{
Expand All @@ -129,10 +130,21 @@ export default function APIMRegisteredAppUsers(props) {
</div>
) : (
<div>
{usageData.length > 0 ? (
{pieChartData.length > 0 ? (
<div style={styles.statDiv}>
<div style={styles.pieDiv}>
<svg viewBox='-50 0 1000 500'>
<VictoryLegend
standalone={false}
theme={VictoryTheme.material}
colorScale={colorScale}
x={460}
y={20}
gutter={20}
rowGutter={styles.rowGutter}
style={styles.victoryLegend}
data={legendData}
/>
<VictoryPie
labelComponent={(
<VictoryTooltip
Expand All @@ -151,22 +163,11 @@ export default function APIMRegisteredAppUsers(props) {
padding={50}
theme={VictoryTheme.material}
colorScale={colorScale}
data={usageData}
data={pieChartData}
x={d => d.applicationName}
y={d => d.users}
labels={d => `${d.applicationName} : ${((d.users
/ (sumBy(usageData, o => o.users))) * 100).toFixed(2)}%`}
/>
<VictoryLegend
standalone={false}
theme={VictoryTheme.material}
colorScale={colorScale}
x={460}
y={20}
gutter={20}
rowGutter={styles.rowGutter}
style={styles.victoryLegend}
data={legendData}
/ (sumBy(pieChartData, o => o.users))) * 100).toFixed(2)}%`}
/>
</svg>
</div>
Expand Down Expand Up @@ -210,6 +211,5 @@ APIMRegisteredAppUsers.propTypes = {
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
usageData: PropTypes.instanceOf(Object).isRequired,
legendData: PropTypes.instanceOf(Object).isRequired,
inProgress: PropTypes.bool.isRequired,
};
32 changes: 16 additions & 16 deletions components/org.wso2.analytics.apim.widgets/APIMTopApiCreators/src/APIMTopApiCreators.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import Typography from '@material-ui/core/Typography';
import {
VictoryPie, VictoryLegend, VictoryTooltip, VictoryTheme,
} from 'victory';
import { colorScale } from '@analytics-apim/common-lib';
import { colorScale, Utils } from '@analytics-apim/common-lib';
import sumBy from 'lodash/sumBy';
import CustomTable from './CustomTable';

Expand Down Expand Up @@ -61,7 +61,7 @@ const lightTheme = createMuiTheme({
*/
export default function APIMTopApiCreators(props) {
const {
themeName, height, limit, creatorData, legendData, handleChange, inProgress, width,
themeName, height, limit, creatorData, handleChange, inProgress, width,
} = props;
const fontSize = width < 1000 ? 25 : 18;
const styles = {
Expand Down Expand Up @@ -133,6 +133,7 @@ export default function APIMTopApiCreators(props) {
strokeWidth: 1,
},
};
const { pieChartData, legendData } = Utils.summarizePieData(creatorData, 'creator', 'apicount');
return (
<MuiThemeProvider
theme={themeName === 'dark' ? darkTheme : lightTheme}
Expand Down Expand Up @@ -217,6 +218,17 @@ export default function APIMTopApiCreators(props) {
<div style={styles.statDiv}>
<div style={styles.pieDiv}>
<svg viewBox='-50 0 1000 500'>
<VictoryLegend
standalone={false}
theme={VictoryTheme.material}
colorScale={colorScale}
x={460}
y={20}
gutter={20}
rowGutter={styles.rowGutter}
style={styles.victoryLegend}
data={legendData}
/>
<VictoryPie
labelComponent={(
<VictoryTooltip
Expand All @@ -235,22 +247,11 @@ export default function APIMTopApiCreators(props) {
padding={50}
theme={VictoryTheme.material}
colorScale={colorScale}
data={creatorData}
data={pieChartData}
x={d => d.creator}
y={d => d.apicount}
labels={d => `${d.creator} : ${((d.apicount
/ (sumBy(creatorData, o => o.apicount))) * 100).toFixed(2)}%`}
/>
<VictoryLegend
standalone={false}
theme={VictoryTheme.material}
colorScale={colorScale}
x={460}
y={20}
gutter={20}
rowGutter={styles.rowGutter}
style={styles.victoryLegend}
data={legendData}
/ (sumBy(pieChartData, o => o.apicount))) * 100).toFixed(2)}%`}
/>
</svg>
</div>
Expand All @@ -276,7 +277,6 @@ APIMTopApiCreators.propTypes = {
width: PropTypes.string.isRequired,
limit: PropTypes.string.isRequired,
creatorData: PropTypes.instanceOf(Object).isRequired,
legendData: PropTypes.instanceOf(Object).isRequired,
handleChange: PropTypes.func.isRequired,
inProgress: PropTypes.bool.isRequired,
};
33 changes: 16 additions & 17 deletions components/org.wso2.analytics.apim.widgets/APIMTopAppCreators/src/APIMTopAppCreators.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import Typography from '@material-ui/core/Typography';
import {
VictoryPie, VictoryLegend, VictoryTooltip, VictoryTheme,
} from 'victory';
import { colorScale } from '@analytics-apim/common-lib';
import { colorScale, Utils } from '@analytics-apim/common-lib';
import sumBy from 'lodash/sumBy';
import CustomTable from './CustomTable';

Expand Down Expand Up @@ -61,7 +61,7 @@ const lightTheme = createMuiTheme({
*/
export default function APIMTopAppCreators(props) {
const {
themeName, height, width, creatorData, legendData, handleChange, limit, inProgress,
themeName, height, width, creatorData, handleChange, limit, inProgress,
} = props;
const fontSize = width < 1000 ? 25 : 18;
const styles = {
Expand Down Expand Up @@ -132,7 +132,7 @@ export default function APIMTopAppCreators(props) {
strokeWidth: 1,
},
};

const { pieChartData, legendData } = Utils.summarizePieData(creatorData, 'creator', 'appcount');
return (
<MuiThemeProvider
theme={themeName === 'dark' ? darkTheme : lightTheme}
Expand Down Expand Up @@ -216,6 +216,17 @@ export default function APIMTopAppCreators(props) {
<div style={styles.statDiv}>
<div style={styles.pieDiv}>
<svg viewBox='-50 0 1000 500'>
<VictoryLegend
standalone={false}
theme={VictoryTheme.material}
colorScale={colorScale}
x={460}
y={20}
gutter={20}
rowGutter={styles.rowGutter}
style={styles.victoryLegend}
data={legendData}
/>
<VictoryPie
labelComponent={(
<VictoryTooltip
Expand All @@ -234,22 +245,11 @@ export default function APIMTopAppCreators(props) {
padding={50}
theme={VictoryTheme.material}
colorScale={colorScale}
data={creatorData}
data={pieChartData}
x={d => d.creator}
y={d => d.appcount}
labels={d => `${d.creator} : ${((d.appcount
/ (sumBy(creatorData, o => o.appcount))) * 100).toFixed(2)}%`}
/>
<VictoryLegend
standalone={false}
theme={VictoryTheme.material}
colorScale={colorScale}
x={460}
y={20}
gutter={20}
rowGutter={styles.rowGutter}
style={styles.victoryLegend}
data={legendData}
/ (sumBy(pieChartData, o => o.appcount))) * 100).toFixed(2)}%`}
/>
</svg>
</div>
Expand All @@ -275,5 +275,4 @@ APIMTopAppCreators.propTypes = {
handleChange: PropTypes.func.isRequired,
inProgress: PropTypes.bool.isRequired,
creatorData: PropTypes.instanceOf(Object).isRequired,
legendData: PropTypes.instanceOf(Object).isRequired,
};
Loading

0 comments on commit ef966bb

Please sign in to comment.