<script setup>
import { computed } from 'vue';
import VisXYContainer from '@unovis/vue/containers/xy-container';
import VisSingleContainer from '@unovis/vue/containers/single-container';
import VisLine,{VisLineSelectors} from '@unovis/vue/components/line';
import VisArea from '@unovis/vue/components/area';
import VisAxis from '@unovis/vue/components/axis';
import VisGroupedBar from '@unovis/vue/components/grouped-bar';
import VisScatter,{VisScatterSelectors} from '@unovis/vue/components/scatter';
import VisDonut,{VisDonutSelectors} from '@unovis/vue/components/donut';
import VisHeatmap,{VisHeatmapSelectors} from '@unovis/vue/components/heatmap';
import VisSankey from '@unovis/vue/components/sankey';
import VisGraph,{VisGraphSelectors} from '@unovis/vue/components/graph';
import { number,chartValue } from './model.js';
const p=defineProps({kind:String,data:[Array,Object],duration:Number,area:Boolean,metric:String,percent:Boolean,selected:String});
const emit=defineEmits(['select']);
const teal='#197d78';const color=d=>d.color||teal;
const x=d=>d.x;const y=d=>chartValue(d,p.metric||'actual');
const completeSeries=computed(()=>Array.isArray(p.data)&&p.data.every(d=>chartValue(d,p.metric||'actual')!==undefined));
const lineAttributes={[VisLineSelectors.linePath]:{'data-aen-line':'trend'}};
const tick=n=>Math.abs(n)>=1000?number(n/1000)+'к':number(n);
const eventsDonut={[VisDonutSelectors.segment]:{click:d=>emit('select',d.data?.id??d.id)}};
const eventsScatter={[VisScatterSelectors.point]:{click:d=>emit('select',d.id)}};
const eventsHeat={[VisHeatmapSelectors.cell]:{click:d=>emit('select',`${d.day}-${d.slot}`)}};
const eventsGraph={[VisGraphSelectors.node]:{click:d=>emit('select',d.id)}};
const labels=()=>['Пн','Вт','Ср','Чт','Пт'];
const barLabel=n=>p.data.find(d=>d.x===n)?.name||'';
const graphColor=d=>d.id===p.selected?'#b66b30':'#197d78';
const flowLabel=d=>({lead:'Вход',qualified:'Отбор',rejected:'Мимо',offer:'Оффер',lost:'Отказ',paid:'Оплата',waiting:'Ждут'})[d.id]||d.label;
const graphData=computed(()=>p.kind==='network'?JSON.parse(JSON.stringify(p.data)):p.data);
</script>
<template>
 <div class="chart-frame" :class="{'chart-tall':kind==='flow'}" role="img" :aria-label="'График: '+kind+'. Те же значения доступны в таблице и элементах выбора ниже.'">
  <VisXYContainer v-if="kind==='trend'" :data="data" :height="280" :margin="{left:8,right:12,top:18,bottom:5}" :duration="duration" :yDomain="[0,undefined]">
   <VisArea v-if="area&&completeSeries" :x="x" :y="y" :opacity=".16" :color="teal" :duration="duration"/>
   <VisLine :x="x" :y="y" :color="teal" :duration="duration" :lineWidth="3" :attributes="lineAttributes"/>
   <VisScatter :x="x" :y="y" :color="teal" :size="5" :duration="duration"/>
   <VisAxis type="x" :numTicks="5" :tickFormat="n=>String(Math.round(n))+'.10'" :gridLine="false"/>
   <VisAxis type="y" :numTicks="4" :tickFormat="tick"/>
  </VisXYContainer>
  <VisXYContainer v-else-if="kind==='compare'" :data="data" :height="280" :margin="{left:5,right:8,top:16,bottom:5}" :duration="duration" :yDomain="[0,undefined]">
   <VisGroupedBar :x="x" :y="[d=>d.factValue,d=>d.planValue]" :color="(d,i)=>i===0?teal:'#aeb9bc'" :groupPadding=".3" :roundedCorners="3" :duration="duration"/>
   <VisAxis type="x" :tickValues="data.map(d=>d.x)" :tickFormat="barLabel" :gridLine="false" :tickTextAngle="-20"/>
   <VisAxis type="y" :numTicks="4" :tickFormat="percent?n=>number(n)+'%':tick"/>
  </VisXYContainer>
  <VisSingleContainer v-else-if="kind==='share'" :data="data" :height="280" :duration="duration">
   <VisDonut :value="d=>d.actual" :color="color" :arcWidth="42" :padAngle=".025" :centralLabel="'Выручка'" :centralSubLabel="'по отделам'" :events="eventsDonut" :duration="duration"/>
  </VisSingleContainer>
  <VisSingleContainer v-else-if="kind==='capacity'" :data="data" :height="240" :margin="{left:38,right:10,top:24,bottom:10}" :duration="duration">
   <VisHeatmap :value="d=>d.hours" layout="column" :numRows="4" :numColumns="5" :colorDomain="[0,4]" :colorRange="['#e5eeeb','#a5d7cc','#4fa99b','#196d64','#ad6035']" :columnLabel="i=>labels()[i]" :rowLabel="i=>['09–11','11–13','14–16','16–18'][i]" :cellPadding="4" :cellCornerRadius="4" :events="eventsHeat" :duration="duration"/>
  </VisSingleContainer>
  <VisXYContainer v-else-if="kind==='projects'" :data="data" :height="280" :margin="{left:5,right:12,top:16,bottom:5}" :duration="duration" :xDomain="[0,380]" :yDomain="[0,380]">
   <VisScatter :x="d=>d.budget" :y="d=>d.actual" :size="d=>d.id===selected?20:12" :color="d=>d.actual>d.budget?'#b66b30':teal" :events="eventsScatter" :duration="duration"/>
   <VisAxis type="x" :numTicks="4" label="Бюджет, тыс. ₽"/>
   <VisAxis type="y" :numTicks="4" :tickFormat="n=>number(n)"/>
  </VisXYContainer>
  <VisSingleContainer v-else-if="kind==='flow'" :data="data" :height="350" style="min-width:520px" :margin="{left:12,right:12,top:12,bottom:12}" :duration="duration">
   <VisSankey :label="flowLabel" :linkValue="d=>d.value" :nodeWidth="12" :nodePadding="24" :nodeColor="teal" :linkColor="'#72b0a7'" :labelFontSize="12" :labelFit="'trim'" :enableZoom="false" :duration="duration"/>
  </VisSingleContainer>
  <VisSingleContainer v-else-if="kind==='network'" :data="graphData" :height="300" :duration="duration">
   <VisGraph layoutType="circular" :nodeLabel="d=>d.label" :nodeSize="30" :nodeFill="graphColor" :nodeLabelFontSize="12" :linkWidth="2" :disableZoom="true" :disableDrag="true" :disableBrush="true" :fitViewPadding="28" :events="eventsGraph" :duration="duration"/>
  </VisSingleContainer>
 </div>
</template>
