UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

5 lines (4 loc) 4.12 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("../tslib.es6-BW4cJBUu.js"),i=require("react"),_=require("classnames"),S=require("@highcharts/react"),y=require("highcharts");require("highcharts/modules/accessibility");require("highcharts/modules/pattern-fill");const M=require("../legend-CY_MXova.js"),t=require("../shared-DrsztGqS.js");function N({date:e,points:r,total:a,valueFormatter:o}){const s=r.map(n=>{var c;const l=t.escapeHtml(n.series.name),m=t.escapeHtml(n.label!==void 0?n.label:o((c=n.y)!==null&&c!==void 0?c:0));return`<div style="display:flex;justify-content:space-between;gap:var(--spacing-200, 16px)"><span>${l}</span><span>${m}</span></div>`}).join(""),p=a?`<div style="display:flex;justify-content:space-between;gap:var(--spacing-200, 16px)"><span>Total</span><span>${t.escapeHtml(o(a))}</span></div>`:"";return`<b>${t.escapeHtml(e)}</b>${s}${p}`}M.ebayLegend(y);const R=` .ebay-area-chart { width: 100%; } .ebay-area-chart .highcharts-tooltip-container svg { overflow: visible; } `;function $(e,r){const a=typeof e=="string"?parseFloat(e):e;return r("%b %e, %Y",a)}function V(e){const r=typeof e=="string"?parseFloat(e):e;return Intl.NumberFormat("en-US",{style:"currency",currency:"USD"}).format(r)}function W(e){const r=typeof e=="string"?parseFloat(e):e;return Intl.NumberFormat("en-US",{notation:"compact",style:"currency",currency:"USD",maximumSignificantDigits:4}).format(r)}function C(e,r){return Object.keys(e).forEach(a=>{const o=e[a],s=r[a];o instanceof Object&&Object.assign(o,C(s??{},o))}),Object.assign(r,e)}function I(e){const r=(Array.isArray(e)?e:[e]).map(a=>Object.assign(Object.assign({},a),{data:Array.isArray(a.data)?[...a.data]:a.data}));return t.setSeriesMarkerStyles(r),t.setSeriesColors(r),r}const U=e=>{var{title:r,description:a,series:o,tooltipValueFormatter:s=V,tooltipTitleFormatter:p=$,xLabelFormatter:n,yLabelFormatter:c=W,areaType:l="areaspline",renderTooltipOutside:m=!0,highchartOptions:b,className:T}=e,O=w.__rest(e,["title","description","series","tooltipValueFormatter","tooltipTitleFormatter","xLabelFormatter","yLabelFormatter","areaType","renderTooltipOutside","highchartOptions","className"]);const h=i.useMemo(()=>I(o),[o]),x=i.useMemo(()=>{const u=h.length>1,f={type:"datetime",labels:{formatter:n?function(){return n(this.value,y.dateFormat)}:void 0,format:"{value:%b %e}",align:"center",style:{color:t.labelsColor}},tickWidth:0,crosshair:{color:"rgba(0, 0, 0, 0.2)",zIndex:3}},d={gridLineColor:t.gridColor,opposite:!0,reversedStacks:!1,labels:{formatter:function(){return c(this.value)},style:{color:t.labelsColor}},title:{enabled:!1},offset:0},H={enabled:u,symbolRadius:2,symbolWidth:12,symbolHeight:12,align:"left",itemStyle:{color:t.legendColor,fontWeight:"normal"},itemHiddenStyle:{color:t.legendInactiveColor},itemHoverStyle:{color:t.legendHoverColor}},j={formatter:function(){var g;const k=p((g=this.x)!==null&&g!==void 0?g:0,y.dateFormat),E=this.points&&this.points.length>1&&this.points.reduce((q,L)=>{var v;return q+((v=L.y)!==null&&v!==void 0?v:0)*100},0)/100;return N({date:k,points:this.points,total:E||!1,valueFormatter:s})},useHTML:!0,backgroundColor:t.tooltipBackgroundColor,borderWidth:0,borderRadius:10,outside:m,shadow:!1,shared:!0,style:{filter:t.tooltipShadows,fontSize:"12px"}},A={series:{accessibility:{description:a},stacking:"normal",states:{hover:{halo:{size:0}}},marker:{enabled:!1,animation:{duration:0}}},[l]:{className:"ebay-area-chart",lineWidth:1}},F={chart:{type:l,animation:!1,backgroundColor:t.backgroundColor,style:{fontFamily:t.chartFontFamily}},colors:t.colorMapping,xAxis:f,yAxis:d,legend:H,tooltip:j,plotOptions:A,credits:{enabled:!1}};return b?C(F,b):F},[h,l,a,n,c,s,p,m,b]);return i.createElement(i.Fragment,null,i.createElement("style",null,R),i.createElement("div",Object.assign({},O,{className:_("ebay-area-chart",T)}),i.createElement(S.Chart,{highcharts:y,title:r,options:x},h.map((u,f)=>{var d;return i.createElement(S.Series,{key:u.name||f,type:l,data:(d=u.data)!==null&&d!==void 0?d:[],options:{type:l,name:u.name}})}))))};exports.EbayAreaChart=U;