jsxImportSource emotion import { css } from '@emotion/react' ; import React from 'react' ; import { useDataSourceState } from '../../context/DataSourceContext' ; import { IMusicRecordGrid } from '../../models/DataModel' ; import Highcharts , { DataLabelsOptions } from 'highcharts' ; import { complement } from 'polished' ; import { ICommonChartProps } from './CommonChartProps' ; import { cornFlowerBlue } from '../../constants' ; import { MapleClient } from '../../models/MapleClient' ; import { MusicChart } from '../MusicChart' ; const RegionalDistributionChart = ( props ) => { const dataSource = useDataSourceState ( ) ; const selectedYear = props . selectedYear ; const songsInYear = dataSource . filter ( ( song ) => song . source . date ?. getFullYear ( ) === selectedYear && song . source . client ) ; const getYearlyRegionalCount = ( region ) : number => { return songsInYear . filter ( ( song ) => song . source . client ?. includes ( region ) ) . length ; } ; const yearlyKorea = getYearlyRegionalCount ( MapleClient . Korea ) ; const yearlyOverseas = songsInYear . length - yearlyKorea ; const options = { chart : { type : 'pie' , } , title : { text : 'Distribution of song region' , } , series : [ { id : 'domesticVsOverseas' , name : 'Total Songs' , type : 'pie' , data : [ { name : 'Domestic' , color : cornFlowerBlue , y : yearlyKorea } , { name : 'Overseas' , color : complement ( cornFlowerBlue ) , y : yearlyOverseas , } , ] , size : '70%' , dataLabels : { enabled : false , } , } , { id : 'regional' , name : 'Songs' , type : 'pie' , data : [ { name : 'Korea' , color : cornFlowerBlue , y : yearlyKorea , } , { name : 'Japan' , y : getYearlyRegionalCount ( MapleClient . Japan ) } , { name : 'China' , y : getYearlyRegionalCount ( MapleClient . China ) } , { name : 'Taiwan' , y : getYearlyRegionalCount ( MapleClient . Taiwan ) } , { name : 'Thailand' , y : getYearlyRegionalCount ( MapleClient . Thailand ) } , { name : 'SEA' , y : getYearlyRegionalCount ( MapleClient . SEA ) } , { name : 'Global' , y : getYearlyRegionalCount ( MapleClient . Global ) } , { name : 'Brazil' , y : getYearlyRegionalCount ( MapleClient . Brazil ) } , ] , size : '100%' , innerSize : '70%' , dataLabels : { formatter : function ( options ) : string | undefined { if ( ! this . y ) return undefined ; return this . key ; } , } , } , ] , } ; return ( < MusicChart styles = { css `
        width: 35%;
      ` } options = { options } / > ) ; } ; export default RegionalDistributionChart ;