@ebay/ui-core-react/ebay-line-chart/index.js

Skin components build off React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("../tslib.es6-BW4cJBUu.js"),n=require("react"),X=require("classnames"),P=require("@highcharts/react"),S=require("highcharts");require("highcharts/modules/accessibility");require("highcharts/modules/pattern-fill");const z=require("../legend-CY_MXova.js"),r=require("../shared-DrsztGqS.js"),q=require("../debounce-BQsYxxOL.js");function K({date:s,points:l,seriesLength:o}){const e=l.map(i=>{var t,a;if(i.tooltip)return r.escapeHtml(i.tooltip);if(o){const u=r.escapeHtml(i.series.name),d=r.escapeHtml((t=i.label)!==null&&t!==void 0?t:"");return`<div style="display:flex"><span>${u}</span><span style="margin-left:16px">${d}</span></div>`}return r.escapeHtml((a=i.label)!==null&&a!==void 0?a:"")}).join("");return`<b>${r.escapeHtml(s)}</b><br>${e}`}z.ebayLegend(S);const Z=`
    .ebay-line-chart .highcharts-point { opacity: 0; }
    .ebay-line-chart .ebay-line-chart__marker--visible { opacity: 1; }
    .ebay-line-chart .highcharts-legend-item .highcharts-point { opacity: 1; stroke-width: 0; }
    .ebay-line-chart .highcharts-legend-item .highcharts-graph { display: none; }
    .dark .ebay-line-chart .highcharts-halo { fill-opacity: 0.8; }
`,T=6,w=["circle","square","triangle","triangle-down","diamond"];function G(s){return(Array.isArray(s)?s:[s]).map((o,e)=>Object.assign(Object.assign({},o),{marker:Object.assign(Object.assign({},o.marker),{symbol:w[e%w.length]})}))}function J(s,l){var o,e,i,t,a,u;const d=[r.lineChartPrimaryColor,r.lineChartSecondaryColor,r.lineChartTertiaryColor,r.lineChartQueternaryColor,r.lineChartQuinaryColor];if(l){const f=l.toLowerCase(),g=(i=(e=(o=s[0])===null||o===void 0?void 0:o.data[0])===null||e===void 0?void 0:e.y)!==null&&i!==void 0?i:0,v=(t=s[0])===null||t===void 0?void 0:t.data,_=(u=(a=v?.[v.length-1])===null||a===void 0?void 0:a.y)!==null&&u!==void 0?u:0,p=g<_;f==="positive"||f!=="negative"&&f!=="neutral"&&p?d[0]=r.trendPositiveColor:(f==="negative"||f!=="neutral"&&!p)&&(d[0]=r.trendNegativeColor)}return d}function U(s){const l=s();l&&(l.series.forEach(o=>{o.data.forEach(e=>{!e.onTick&&e.className!==null?e.update({className:void 0,marker:{enabled:!1}},!1,!1):e.onTick&&e.className===null&&e.update({className:"ebay-line-chart__marker--visible",onTick:e.onTick,marker:{enabled:!0,radius:T,lineColor:r.backgroundColor,lineWidth:2}},!1,!1)})}),l.redraw())}function V(s,l){const o=s();if(!o)return;const e=l.target.x;o.series.forEach(i=>{i.data.forEach(t=>{t.x===e?t.update({className:"ebay-line-chart__marker--visible",onTick:t.onTick,marker:{enabled:!0,radius:T,lineColor:r.backgroundColor,lineWidth:2}},!1,!1):!t.onTick&&t.className!==null&&t.update({className:void 0,onTick:t.onTick,marker:{enabled:!1}},!1,!1)})}),o.redraw()}function R(s,l,o,e){if(!s)return;const i=l();i&&(e.current=Object.keys(i.axes[0].ticks).map(t=>parseInt(t,10)),o.current!==e.current.length&&(o.current=e.current.length,i.series.forEach(t=>{t.data.forEach(a=>{a.className!==null&&a.update({className:void 0,onTick:!1,marker:{enabled:!1}},!1,!1)})}),i.series.forEach(t=>{t.data.forEach(a=>{e.current.forEach(u=>{u===a.x&&a.className===null&&a.update({className:"ebay-line-chart__marker--visible",onTick:!0,marker:{enabled:!0,radius:T,lineColor:r.backgroundColor,lineWidth:2}},!1,!1)})})}),i.redraw()))}const ee=s=>{var{title:l,description:o,series:e,xAxisLabelFormat:i,xAxisPositioner:t,yAxisLabels:a,yAxisPositioner:u,plotPoints:d,renderTooltipOutside:f=!0,trend:g,className:v}=s,_=Q.__rest(s,["title","description","series","xAxisLabelFormat","xAxisPositioner","yAxisLabels","yAxisPositioner","plotPoints","renderTooltipOutside","trend","className"]);const p=n.useRef(null),k=()=>{var c,h;return(h=(c=p.current)===null||c===void 0?void 0:c.chart)!==null&&h!==void 0?h:null},N=n.useRef(-1),L=n.useRef([]),b=n.useMemo(()=>G(e),[e]),H=n.useMemo(()=>J(b,g),[b,g]),A=n.useRef(q.debounce(()=>U(k),80)),j=n.useRef(q.debounce(c=>V(k,c),85));n.useEffect(()=>{R(d,k,N,L)},[]);const F=n.useMemo(()=>{var c,h,x;const M=b.length>1;let C=0,E=0;for(const m of b)for(const y of m.data)E=Math.max((c=y.y)!==null&&c!==void 0?c:0,E);const W={type:"datetime",labels:{format:i||"{value:%b %e}",align:"center",style:{color:r.labelsColor}},tickWidth:0,tickPositioner:t,crosshair:{dashStyle:"Solid"}},I={gridLineColor:r.gridColor,opposite:!0,labels:{format:a?void 0:"${text}",formatter:a?function(){var m;return this.isFirst&&(C=-1),C=C+1,(m=a[C])!==null&&m!==void 0?m:""}:void 0,style:{color:r.labelsColor}},max:E,title:{enabled:!1},offset:0,tickPositioner:u},Y={enabled:M,symbolRadius:6,symbolWidth:12,symbolHeight:12,itemStyle:{color:r.legendColor},itemHiddenStyle:{color:r.legendInactiveColor},itemHoverStyle:{color:r.legendHoverColor}},$={formatter:function(){var m,y,O;return K({date:S.dateFormat("%b %e, %Y",(O=(y=(m=this.points)===null||m===void 0?void 0:m[0])===null||y===void 0?void 0:y.x)!==null&&O!==void 0?O:0,!1),points:this.points,seriesLength:M})},useHTML:!0,backgroundColor:r.tooltipBackgroundColor,borderWidth:0,borderRadius:10,outside:f,shadow:!1,shared:!0,style:{filter:r.tooltipShadows,fontSize:"12px"}},B=(x=(h=b[0])===null||h===void 0?void 0:h.data[0])===null||x===void 0?void 0:x.x,D={line:{events:{mouseOut:A.current}},series:{description:o,lineWidth:3,pointStart:B,point:{events:{mouseOver:j.current,mouseOut:A.current}}}};return{chart:{type:"line",backgroundColor:r.backgroundColor,style:{fontFamily:r.chartFontFamily},events:{redraw:()=>R(d,k,N,L)}},colors:H,xAxis:W,yAxis:I,legend:Y,tooltip:$,plotOptions:D,credits:{enabled:!1}}},[b,H,i,t,a,u,o,f,d]);return n.createElement(n.Fragment,null,n.createElement("style",null,Z),n.createElement("div",Object.assign({},_,{className:X("ebay-line-chart",v)}),n.createElement(P.Chart,{ref:p,highcharts:S,title:l,options:F},b.map((c,h)=>n.createElement(P.Series,{key:c.name||h,type:"line",data:c.data,options:{type:"line",name:c.name}})))))};exports.EbayLineChart=ee;