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

Skin components build off React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("../tslib.es6-BW4cJBUu.js"),b=require("react"),L=require("classnames"),v=require("@highcharts/react"),p=require("../shared-DrsztGqS.js"),O=require("../legend-CY_MXova.js"),x=require("highcharts");require("highcharts/modules/accessibility");require("highcharts/modules/pattern-fill");function S(r){r.wrap(r.seriesTypes.column.prototype,"translate",function(c){const a=this.options.top,s=this.options.bottom;c.call(this);for(const l of this.points){const o=l.shapeArgs;if(!o)continue;const i=o.x,e=o.width;let t=o.y,n=o.height-(s?0:4);n<0&&(n=o.height,t=t-4);const h=3;let m=r.relativeLength(a?h:0,e),u=r.relativeLength(a?h:0,e),g=r.relativeLength(s?h:0,e),d=r.relativeLength(s?h:0,e);const f=Math.min(e,n)/2;m>f&&(m=f),u>f&&(u=f),g>f&&(g=f),d>f&&(d=f),l.dlBox=o,l.shapeY=t,l.shapeType="path";const y=[["M",i+m,t],["L",i+e-u,t],["C",i+e-u/2,t,i+e,t+u/2,i+e,t+u],["L",i+e,t+n-g],["C",i+e,t+n-g/2,i+e-g/2,t+n,i+e-g,t+n],["L",i+d,t+n],["C",i+d/2,t+n,i,t+n-d/2,i,t+n-d],["L",i,t+m],["C",i,t+m/2,i+m/2,t,i+m,t],["Z"]];l.shapeArgs=Object.assign(Object.assign({},o),{d:y})}})}function C({date:r,data:c,stacked:a,x:s}){let l=`<b>${p.escapeHtml(r)}</b>`;if(a){const o=c;for(const i of o)for(const e of i.data)if(e.x===s){const t=e;l+='<div style="display: flex; justify-content: space-between; width: 100%; align-items: flex-start;">',l+=`${p.escapeHtml(i.name||"")}`,l+=`<span style="margin-left: 16px">${p.escapeHtml(t.label||"")}</span>`,l+="</div>"}}else{const o=c;l+=`<div><span>${p.escapeHtml(o.label||"")}</span></div>`}return l}O.ebayLegend(x);S(x);const w=`
    .ebay-bar-chart {
        width: 100%;
    }
    .ebay-bar-chart .highcharts-legend-item-hidden {
        transition: fill 250ms;
    }
    .ebay-bar-chart .highcharts-legend-item-hidden .highcharts-point {
        stroke-width: 0;
    }
    .highcharts-tooltip-container svg {
        overflow: visible;
    }
`;function E(r,c){const a=Array.isArray(r)?r.map(s=>Object.assign({},s)):[Object.assign({},r)];return c?(a[0].bottom=!0,a[a.length-1].top=!0,a.forEach(s=>{s.group=":previous"})):a.forEach(s=>{s.top=!0,s.bottom=!0}),p.setSeriesColors(a),a}function P(r,c){if(!c)return Math.max(0,...r.flatMap(s=>s.data.map(l=>l.y)));const a=new Map;return r.forEach(s=>{s.data.forEach(l=>{var o;a.set(l.x,((o=a.get(l.x))!==null&&o!==void 0?o:0)+l.y)})}),Math.max(0,...a.values())}function T(r,c){return{type:"datetime",labels:{format:r||"{value:%b %e}",align:"center",style:{color:p.labelsColor}},tickWidth:0,tickPositioner:c}}function k(r,c,a){let s=0;return{gridLineColor:p.gridColor,opposite:!0,reversedStacks:!1,labels:{format:c?void 0:"${text}",formatter:c?function(){return this.isFirst&&(s=-1),s=s+1,c[s]}:void 0,style:{color:p.labelsColor}},max:r,title:{enabled:!1},offset:0,tickPositioner:a}}function H(r){return{symbolRadius:2,enabled:Array.isArray(r)&&r.length>1,itemStyle:{color:p.legendColor},itemHiddenStyle:{color:p.legendInactiveColor},itemHoverStyle:{color:p.legendHoverColor}}}function B(r,c,a){const s=function(){const o=this.series.chart.series,i=r.dateFormat("%b %e, %Y",this.x,!1),e=this.x;return C(c?{date:i,data:o,stacked:!0,x:e}:{date:i,data:this,stacked:!1,x:e})},l=function(o,i){const e=this.chart,t=e.series,n=e.pointer.getChartPosition(),h=e.hoverPoint,m=h.index,u=h,g=t[t.length-1].data[m],d=h.series.yAxis.top,f=n.top+d+g.shapeY-i-15;let y=n.left+u.dlBox.x+u.dlBox.width*.5-o*.5+3;return y<6&&(y=6),y+u.dlBox.width>n.left+e.chartWidth-6&&(y=n.left+e.chartWidth-u.dlBox.width-6),{x:y,y:f}};return{formatter:s,useHTML:!0,backgroundColor:p.tooltipBackgroundColor,borderWidth:0,borderRadius:10,outside:a,shadow:!1,style:{filter:p.tooltipShadows,fontSize:"12px"},positioner:c?l:void 0}}function M(r,c){const a=function(){const o=this.chart.series;r&&setTimeout(()=>{let i=!1,e=!1;for(let t=0;t<o.length;t++){const n=o[t].options;!e&&o[t].visible?(n.bottom=!0,e=!0):n.bottom=!1}for(let t=o.length-1;t>=0;t--){const n=o[t].options;!i&&o[t].visible?(n.top=!0,i=!0):n.top=!1}this.chart.redraw()},0)},s=function(){const o=this.series.chart;o.series.forEach(i=>i.points.forEach(e=>{(r&&e.x!==this.x||!r&&e!==this)&&e.update({opacity:.2},!1)})),o.redraw()};function l(){const o=this.series.chart;o.series.forEach(i=>i.points.forEach(e=>e.update({opacity:1},!1))),o.redraw()}return{series:{description:c},column:{events:{legendItemClick:a},stacking:r?"normal":void 0,groupPadding:.1,pointPadding:.15,states:{inactive:{opacity:1}},point:{events:{mouseOver:s,mouseOut:l}}}}}function F(r,c,a){const{description:s,series:l,xAxisLabelFormat:o,xAxisPositioner:i,yAxisLabels:e,yAxisPositioner:t,stacked:n=!1,renderTooltipOutside:h=!0}=c;return{chart:{type:"column",backgroundColor:p.backgroundColor,style:{fontFamily:p.chartFontFamily}},colors:p.colorMapping,xAxis:T(o,i),yAxis:k(P(a,n),e,t),legend:H(l),tooltip:B(r,n,h),plotOptions:M(n,s),credits:{enabled:!1}}}const q=r=>{var{title:c,description:a,series:s,xAxisLabelFormat:l,xAxisPositioner:o,yAxisLabels:i,yAxisPositioner:e,stacked:t=!1,renderTooltipOutside:n=!0,className:h}=r,m=A.__rest(r,["title","description","series","xAxisLabelFormat","xAxisPositioner","yAxisLabels","yAxisPositioner","stacked","renderTooltipOutside","className"]);const u=b.useMemo(()=>E(s,t),[s,t]),g=b.useMemo(()=>F(x,{description:a,series:s,xAxisLabelFormat:l,xAxisPositioner:o,yAxisLabels:i,yAxisPositioner:e,stacked:t,renderTooltipOutside:n},u),[a,s,l,o,i,e,t,n,u]);return b.createElement(b.Fragment,null,b.createElement("style",null,w),b.createElement("div",Object.assign({},m,{className:L("ebay-bar-chart",h)}),b.createElement(v.Chart,{highcharts:x,title:c,options:g},u.map((d,f)=>b.createElement(v.Series,{key:d.name||f,type:"column",data:d.data,options:{type:"column",name:d.name,color:d.color,borderColor:d.borderColor,lineColor:d.lineColor,fillOpacity:d.fillOpacity,top:d.top,bottom:d.bottom,group:d.group}})))))};exports.EbayBarChart=q;