@react-magma/charts 3.0.1-next.0 → 4.0.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts.js +1 -1
- package/dist/charts.js.map +1 -1
- package/dist/charts.modern.js +4 -4
- package/dist/charts.modern.js.map +1 -1
- package/dist/charts.modern.module.js +1 -1
- package/dist/charts.modern.module.js.map +1 -1
- package/dist/charts.umd.js +1 -1
- package/dist/charts.umd.js.map +1 -1
- package/dist/components/LineChart/ChartDataTable.d.ts +1 -0
- package/dist/components/LineChart/DataTable.d.ts +1 -0
- package/dist/components/LineChart/GraphTooltip.d.ts +1 -0
- package/package.json +9 -9
- package/src/components/LineChart/Chart.tsx +1 -1
- package/src/components/LineChart/LineChart.stories.tsx +2 -3
- package/src/components/LineChart/LineChart.test.js +3 -5
- package/src/components/LineChart/LineChart.tsx +1 -1
package/dist/charts.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=require("react"),n=require("react-magma-dom"),t=require("@emotion/core"),r=require("react-magma-icons"),i=require("victory"),o=require("react/jsx-runtime");function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,n}var s=a(e);function l(){return l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},l.apply(this,arguments)}function u(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n.indexOf(t=o[r])>=0||(i[t]=e[t]);return i}function c(e,n){return n||(n=e.slice(0)),e.raw=n,e}var d,f,p,x,h,y,m=["#00507A","#8F0033","#B84900","#255200","#711E6E","#005249"],g={width:350,height:350,padding:50},b={fontFamily:'"Work Sans",Helvetica,sans-serif',fontSize:12,letterSpacing:"normal",padding:8,fill:"#3F3F3F",stroke:"transparent",strokeWidth:0},v=l({textAnchor:"middle"},b),k={area:l({style:{data:{fill:"pink"},labels:b}},g),axis:l({style:{axis:{fill:"transparent",stroke:"#8F8F8F",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"},axisLabel:l({},v,{padding:8,stroke:"transparent"}),grid:{fill:"none",stroke:"#dfdfdf",strokeLinecap:"round",strokeLinejoin:"round",pointerEvents:"painted"},ticks:{fill:"transparent",size:0,stroke:"#8F8F8F",strokeWidth:0,strokeLinecap:"round",strokeLinejoin:"round"},tickLabels:l({},b,{fill:"#3F3F3F"})}},g),polarDependentAxis:{style:{ticks:{fill:"transparent",size:1,stroke:"transparent"}}},bar:l({style:{data:{fill:"#3F3F3F",padding:8,strokeWidth:0},labels:b}},g),boxplot:l({style:{max:{padding:8,stroke:"#3F3F3F",strokeWidth:1},maxLabels:l({},b,{padding:3}),median:{padding:8,stroke:"#3F3F3F",strokeWidth:1},medianLabels:l({},b,{padding:3}),min:{padding:8,stroke:"#3F3F3F",strokeWidth:1},minLabels:l({},b,{padding:3}),q1:{padding:8,fill:"#3F3F3F"},q1Labels:l({},b,{padding:3}),q3:{padding:8,fill:"#3F3F3F"},q3Labels:l({},b,{padding:3})},boxWidth:20},g),candlestick:l({style:{data:{stroke:"#3F3F3F"},labels:l({},b,{padding:5})},candleColors:{positive:"#ffffff",negative:"#3F3F3F"}},g),chart:g,errorbar:l({borderWidth:8,style:{data:{fill:"transparent",opacity:1,stroke:"#3F3F3F",strokeWidth:2},labels:b}},g),group:l({colorScale:m},g),histogram:l({style:{data:{fill:"#3F3F3F",stroke:"pink",strokeWidth:2},labels:b}},g),legend:{colorScale:m,gutter:10,orientation:"vertical",titleOrientation:"top",style:{data:{type:"circle"},labels:b,title:l({},b,{padding:5})}},line:l({style:{data:{fill:"transparent",opacity:1,stroke:"#3F3F3F",strokeWidth:2},labels:b}},g),pie:l({colorScale:m,style:{data:{padding:8,stroke:"#DFDFDF",strokeWidth:1},labels:l({},b,{padding:20})}},g),scatter:l({style:{data:{fill:"#3F3F3F",opacity:1,stroke:"transparent",strokeWidth:0},labels:b}},g),stack:l({colorScale:m},g),tooltip:{style:l({},b,{padding:0,pointerEvents:"none"}),flyoutStyle:{stroke:"pink",strokeWidth:1,fill:"#f0f0f0",pointerEvents:"none"},flyoutPadding:5,cornerRadius:5,pointerLength:10},voronoi:l({style:{data:{fill:"transparent",stroke:"transparent",strokeWidth:0},labels:l({},b,{padding:5,pointerEvents:"none"}),flyout:{stroke:"pink",strokeWidth:1,fill:"#f0f0f0",pointerEvents:"none"}}},g)},j=n.styled(n.StyledTooltip)(d||(d=c(["\n background: ",";\n border: 1px solid ",";\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);\n box-sizing: border-box;\n color: ",";\n font-size: ",";\n font-weight: normal;\n line-height: ",";\n margin: 0;\n padding: 8px;\n width: fit-content;\n div {\n margin-bottom: 8px;\n display: flex;\n align-items: flex-start;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n"])),function(e){return e.theme.colors.neutral100},function(e){return e.theme.colors.neutral300},function(e){return e.theme.colors.neutral},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),w=n.styled.span(f||(f=c(["\n background: ",";\n border: ",";\n border-radius: 4px;\n height: 20px;\n width: 20px;\n margin-right: 8px;\n"])),function(e){return e.color},function(e){return e.color?"none":"3px solid black"}),F=function(e){var t=e.datum,r=e.index,i=e.showTooltip,a=e.x,l=e.y,u=s.useContext(n.ThemeContext);return i===r+"-"+t.index?o.jsx("g",{style:{pointerEvents:"none"},children:o.jsx("foreignObject",{x:a,y:l,width:"275",height:"100%",children:o.jsxs(j,{position:n.TooltipPosition.top,role:"tooltip",theme:u,children:[o.jsxs("div",{children:[o.jsx(w,{color:u.iterableColors[r]}),o.jsx("span",{children:t.label})]}),o.jsx(n.TooltipArrow,{theme:u})]})})}):null},L=function(e){var t=e.x,r=e.y,i=e.activePoints,a=e.hiddenData,l=Array.from(Array(e.dataLength-0),function(e,n){return n+0}).filter(function(e){return!a.includes(e)}),u=s.useContext(n.ThemeContext);return o.jsx("g",{style:{pointerEvents:"none"},children:o.jsx("foreignObject",{x:t,y:r,width:"275",height:"100%",children:o.jsxs(j,{"data-testid":"axis-tooltip",position:n.TooltipPosition.top,role:"tooltip",theme:u,children:[i.map(function(e,n){return o.jsxs("div",{children:[o.jsx(w,{color:u.iterableColors[l[n]]}),o.jsx("span",{children:e.label})]},n)}),o.jsx(n.TooltipArrow,{theme:u})]})})})},I=["datum","index","lineIndex","pointRefArray","registerPoint","unregisterPoint"],C=["lineIndex","pointRefArray","pointIndex","registerPoint","unregisterPoint"],S=function(e){var n=e.datum,t=e.index,r=e.lineIndex,a=e.pointRefArray,s=e.registerPoint,c=e.unregisterPoint,d=u(e,I);return o.jsx(i.Point,l({},d,{ariaLabel:n.label,pathComponent:o.jsx(P,{lineIndex:r,pointIndex:t,pointRefArray:a,registerPoint:s,unregisterPoint:c}),role:"button",tabIndex:0}))},P=function(e){var t=e.lineIndex,r=e.pointRefArray,i=e.pointIndex,a=e.registerPoint,c=e.unregisterPoint,d=u(e,C),f=n.useForceUpdate(),p=s.useRef(null);return s.useEffect(function(){return a(r,p),f(),function(){return c(r,p)}},[]),o.jsx("path",l({ref:p,"data-line-index":t,"data-point-index":i},d))},A=["events"],E=function(e){var n=e.events,t=u(e,A);return o.jsxs("g",{children:[o.jsx(i.LineSegment,l({},t,{events:n,style:{strokeWidth:"50px",stroke:"transparent"}})),o.jsx(i.LineSegment,l({},t,{events:n,style:{strokeWidth:"1px",stroke:"black",strokeOpacity:"0.2"}}))]})},T=["children","color","dataIndex","isHidden","onClick","name","focusCurrentLine","resetLineFocus"],z=s.forwardRef(function(e,t){var r=e.color,i=e.dataIndex,a=e.isHidden,c=e.onClick,d=e.name,f=e.focusCurrentLine,p=e.resetLineFocus,x=u(e,T);function h(){a||f&&"function"==typeof f&&f(i)}var y=s.useContext(n.ThemeContext);return o.jsx("div",{style:{display:"inline-flex"},onMouseEnter:h,onMouseLeave:p,children:o.jsx(n.Checkbox,l({checked:!a,color:r,containerStyle:{alignItems:"center",border:"0",boxShadow:"0 0 0",color:y.colors.neutral,display:"inline-flex",margin:"0 36px 20px 0",padding:"0"},inputStyle:{border:r?"none":"2px solid "+y.colors.neutral800,borderRadius:"4px"},labelText:d,onBlur:p,onClick:function(){c&&"function"==typeof c&&c(i),a||p&&"function"==typeof p&&p()},onFocus:h,ref:t,theme:y},x))})}),W=["axisLabel","tickLabels"],D=["style"],R=["axisLabel","tickLabels"],O=["style"],V=n.styled.div(p||(p=c(["\n max-height: 600px;\n max-width: 800px;\n svg {\n overflow: visible;\n }\n"]))),H=n.styled.div(x||(x=c([""]))),q=n.styled.div(h||(h=c(["\n padding-bottom: 24px;\n"]))),B=n.styled.p(y||(y=c(["\n color: ",";\n font-size: ",";\n"])),function(e){return e.theme.colors.neutral},function(e){return e.theme.typeScale.size02.fontSize});function K(e){var t=e.componentProps,r=(t=void 0===t?{}:t).chart,a=void 0===r?{}:r,c=t.line,d=void 0===c?{}:c,f=t.scatter,p=void 0===f?{}:f,x=t.xAxis,h=(x=void 0===x?{style:{}}:x).style,y=(h=void 0===h?{}:h).axisLabel,m=void 0===y?void 0:y,g=h.tickLabels,b=void 0===g?void 0:g,v=u(h,W),j=u(x,D),w=t.yAxis,I=(w=void 0===w?{style:{}}:w).style,C=(I=void 0===I?{}:I).axisLabel,P=void 0===C?void 0:C,A=I.tickLabels,T=void 0===A?void 0:A,K=u(I,R),M=u(w,O),U=e.data,X=void 0===U?[]:U,_=e.lastFocusedScatterPoint,G=e.pointRefArray,Z=e.registerPoint,J=e.unregisterPoint,N=e.tabRef,Q=e.x,Y=e.y,$=s.useContext(n.ThemeContext),ee=s.useContext(n.I18nContext),ne=s.useState([]),te=ne[0],re=ne[1],ie=s.useState(800),oe=ie[0],ae=ie[1],se=s.useState(null),le=se[0],ue=se[1],ce=s.useState(null),de=ce[0],fe=ce[1],pe=s.useState(!0),xe=pe[0],he=pe[1],ye=s.useState(!1),me=ye[0],ge=ye[1],be=s.useRef(null),ve=s.useRef(null);s.useEffect(function(){return Fe(),window.addEventListener("resize",Fe),window.addEventListener("keydown",Le),function(){window.removeEventListener("resize",Fe),window.removeEventListener("keydown",Le)}},[]),s.useEffect(function(){return window.addEventListener("mousemove",Ie),function(){window.removeEventListener("mousemove",Ie)}},[de]);var ke=X.map(function(e,n){return"scatter-"+n}),je=l({tickLabels:l({color:"#3f3f3f",fontSize:12},b),axisLabel:l({color:"#3f3f3f",padding:44,fontSize:14,fontWeight:"bold"},m)},v),we=l({tickLabels:l({fontSize:12},T),axisLabel:l({color:"#3f3f3f",padding:64,fontSize:14,fontWeight:"bold"},P)},K);function Fe(){be.current&&ae(be.current.clientWidth)}function Le(e){"Escape"===e.key&&(fe(null),he(!1))}function Ie(){!de&&he(!0)}function Ce(e){return null===le||le===e?1:.1}function Se(e){te.includes(e)?re(te.filter(function(n){return n!==e})):re(te.concat([e]))}function Pe(e){ue(e)}function Ae(){ue(null)}var Ee=function(e,n){if(n.current){var t=parseInt(n.current.getAttribute("data-line-index"),10);!e.includes(t)&&e.push(parseInt(n.current.getAttribute("data-line-index"),10))}return e},Te=function(e){var n=parseInt(e.current.getAttribute("data-line-index"),10),t=parseInt(e.current.getAttribute("data-point-index"),10),r=G.current.reduce(Ee,[]);return{currentLineIndex:n,currentPointIndex:t,lineIndexes:r,lowestLineIndex:r[0],highestLineIndex:r[r.length-1]}},ze=function(e,n){return function(t){return t.current&&parseInt(t.current.getAttribute("data-line-index"),10)===e&&parseInt(t.current.getAttribute("data-point-index"),10)===n}};function We(e){"Tab"===e.key&&e.shiftKey&&_&&_.current&&G.current.find(function(e){return e.current===_.current})&&(e.preventDefault(),_.current.focus())}return o.jsxs(V,{ref:be,children:[o.jsx(H,{onKeyDown:function(e){var n=e.shiftKey;switch(e.key){case"Tab":e.preventDefault(),_.current=G.current.find(function(e){return e.current===document.activeElement}).current,n?N.current&&N.current.focus():ve.current&&ve.current.focus();break;case"ArrowRight":var t,r,i=G.current.findIndex(function(e){return e.current===document.activeElement});void 0!==i&&(i===G.current.length-1?null==(t=G.current[0])||null==(r=t.current)||r.focus():G.current[i+1].current.focus());break;case"ArrowLeft":var o=G.current.findIndex(function(e){return e.current===document.activeElement});void 0!==o&&(0===o?G.current[G.current.length-1].current.focus():G.current[o-1].current.focus());break;case"ArrowUp":e.preventDefault();var a=G.current.find(function(e){return e.current===document.activeElement});if(a&&a.current){var s=Te(a),l=s.currentLineIndex,u=s.currentPointIndex,c=s.lineIndexes;if(l===s.lowestLineIndex)G.current.find(ze(s.highestLineIndex,u)).current.focus();else{var d=c[c.indexOf(l)-1];G.current.find(ze(d,u)).current.focus()}}break;case"ArrowDown":e.preventDefault();var f=G.current.find(function(e){return e.current===document.activeElement});if(f&&f.current){var p=Te(f),x=p.currentLineIndex,h=p.currentPointIndex,y=p.lineIndexes;if(x===p.highestLineIndex)G.current.find(ze(p.lowestLineIndex,h)).current.focus();else{var m=y[y.indexOf(x)+1];G.current.find(ze(m,h)).current.focus()}}}},children:o.jsxs(i.VictoryChart,l({domainPadding:32,height:400,padding:{top:0,left:80,right:0,bottom:62},theme:k,width:oe,containerComponent:o.jsx(i.VictoryVoronoiContainer,{name:"xAxisGroupLabel",voronoiBlacklist:ke,voronoiDimension:"x",labels:me&&xe?function(){return" "}:void 0,labelComponent:xe?o.jsx(i.VictoryTooltip,{flyoutComponent:o.jsx(L,{dataLength:X.length,hiddenData:te})}):void 0,role:"presentation",voronoiPadding:32})},a,{children:[o.jsx(i.VictoryAxis,l({},M,{dependentAxis:!0,style:we})),X.map(function(e,n){var t=e.data;return!te.includes(n)&&o.jsx(i.VictoryLine,l({style:{data:{opacity:Ce(n),stroke:$.iterableColors[n],strokeWidth:"3"},parent:{border:$.colors.neutral400}},data:t,labelComponent:o.jsx(o.Fragment,{}),x:Q,y:Y},d),"line"+n)}),o.jsx(i.VictoryAxis,l({},j,{style:je,gridComponent:o.jsx(E,{events:{onMouseEnter:function(){return ge(!0)},onMouseLeave:function(){return ge(!1)}}})})),X.map(function(e,n){var t=e.data;return!te.includes(n)&&o.jsx(i.VictoryScatter,l({name:"scatter-"+n,events:[{target:"data",eventHandlers:{onBlur:function(){return he(!0),fe(null),[{target:"labels",mutation:function(){return{active:void 0}}}]},onClick:function(){return[{target:"labels",mutation:function(e){return fe(e.datum.lineIndex+"-"+e.datum.index),{active:!0}}}]},onFocus:function(){return he(!1),[{target:"labels",mutation:function(e){return fe(e.datum.lineIndex+"-"+e.datum.index),{active:!0}}}]},onMouseEnter:function(){return he(!1),[{target:"labels",mutation:function(e){return fe(e.datum.lineIndex+"-"+e.datum.index),{active:!0}}}]},onMouseLeave:function(){fe(null),he(!0)}}}],style:{data:{fill:$.colors.neutral100,opacity:Ce(n),stroke:$.iterableColors[n],strokeWidth:2}},size:5,data:t.map(function(e,t){return l({index:t,lineIndex:n},e)}),dataComponent:o.jsx(S,{lineIndex:n,pointRefArray:G,registerPoint:Z,unregisterPoint:J}),labels:function(){return""},labelComponent:o.jsx(i.VictoryTooltip,{text:"",flyoutComponent:o.jsx(F,{index:n,showTooltip:de})}),x:Q,y:Y},p),"scatter"+n)})]}))}),o.jsxs(q,{children:[o.jsx(B,{theme:$,children:ee.charts.line.dataLegendsLabel}),X.map(function(e,n){var t=e.name,r=ee.charts.line.legendButtonAriaLabel.replace(/\{name\}/g,t);return o.jsx(z,{"aria-label":r,color:$.iterableColors[n],dataIndex:n,isHidden:te.includes(n),name:t,onClick:Se,onKeyDown:0===n?We:void 0,focusCurrentLine:Pe,ref:0===n?ve:void 0,resetLineFocus:Ae},n)})]})]})}function M(e){return e.toLowerCase().replace(/[^a-z 0-9]/gi,"").replace(/(?:^\w|[A-Z]|\b\w)/g,function(e,n){return 0===n?e.toLowerCase():e.toUpperCase()}).replace(/\s+/g,"")}var U,X,_,G,Z,J,N=function(e){var t=e.data,r=void 0===t?[]:t,i=e.xData,a=i.keyValue,u=i.label,c=i.tickFormat,d=i.tickValues,f=e.yData,p=f.keyValue,x=f.tickFormat,h=s.useState({columns:[],rows:[]}),y=h[0],m=h[1];return s.useEffect(function(){var e,n,t;m((e=M(a||u||"x"),n=r.reduce(function(e,n){return n.data.forEach(function(n){var t=n.x||a&&n[a];!e.includes(t)&&e.push(t)}),e},[]),t={columns:n.length>0?[{field:e,header:u||a||"X",isRowHeader:!0}]:[],rows:n.reduce(function(t,r,i){var o,a=d&&"number"==typeof r&&d.length===n.length?c&&"function"==typeof c?c(d[r-1]):d[r-1]:c&&Array.isArray(c)?c[r-1]:c&&"function"==typeof c?c(r):r;return t.push(((o={})[e]=a,o.id=i,o)),t},[])},r.reduce(function(e,n){var r=n.name,i=n.data,o=M(r);return e.columns.push({field:o,header:r}),i.forEach(function(n,r){var i,a=n.y||0===n.y?n.y:p&&n[p];e.rows[r]=l({},e.rows[r],((i={id:t.rows.length>0?r+1:r})[o]=x&&"function"==typeof x?x(a):a,i))}),e},t)))},[r]),o.jsx(n.Card,{children:y.rows.length>0?o.jsx(n.Datagrid,{hasPagination:!1,columns:y.columns,rows:y.rows}):o.jsx(n.Spinner,{})})},Q=["description","title","testId","type"],Y=n.styled.span(U||(U=c(["\n color: ",";\n font-size: ",";\n font-weight: 600;\n font-family: ",";\n line-height: ",";\n margin: 0 0 12px 0;\n"])),function(e){return e.theme.colors.neutral},function(e){return e.theme.typeScale.size04.fontSize},function(e){return e.theme.bodyFont},function(e){return e.theme.typeScale.size04.lineHeight}),$=n.styled(n.Paragraph)(X||(X=c(["\n font-size: ",";\n margin: 0 0 18px 0;\n"])),function(e){return e.theme.typeScale.size02.fontSize}),ee=n.styled(n.TabsContainer)(_||(_=c(["\n width: 800px;\n ul {\n box-shadow: inset 0 -1px 0 ",";\n }\n"])),function(e){return e.theme.colors.neutral300}),ne=n.styled(n.TabPanel)(G||(G=c(["\n padding: 22px 0;\n"]))),te=n.styled(n.Card)(Z||(Z=c(["\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n display: ",";\n right: ",";\n max-height: ",";\n opacity: ",";\n outline: 0;\n overflow-y: auto;\n padding: ","\n ",";\n position: absolute;\n transition: opacity 0.3s;\n white-space: nowrap;\n z-index: 2;\n\n ","\n"])),function(e){return e.isOpen?"block":"none"},function(e){return e.theme.spaceScale.spacing02},function(e){return e.maxHeight?e.maxHeight:e.theme.dropdown.content.maxHeight},function(e){return e.isOpen?"1":"0"},function(e){return e.theme.spaceScale.spacing05},function(e){return e.theme.spaceScale.spacing05},function(e){return e.width&&t.css(J||(J=c(["\n white-space: normal;\n width: ",";\n "])),e.width)});function re(e,t){var i,a,c,d,f,p,x=e.description,h=e.title,y=e.type,m=u(e,Q),g=s.useRef(null),b=s.useRef(null),v=s.useContext(n.ThemeContext),k=s.useContext(n.I18nContext),j=n.useDescendants(),w=j[0],F=j[1],L=j[2],I=s.useState(!1),C=I[0],S=I[1];return o.jsxs("div",{ref:t,children:[o.jsx(Y,{theme:v,children:h}),x&&o.jsx($,{theme:v,visualStyle:n.TypographyVisualStyle.bodySmall,children:x}),o.jsxs(ee,{theme:v,children:[o.jsxs(n.Tabs,{children:[o.jsx(n.Tab,{children:k.charts.line.chartTabLabel}),o.jsx(n.Tab,{children:k.charts.line.dataTabLabel}),o.jsxs("div",{onBlur:function(){S(!1)},style:{display:"inline-block",marginLeft:"auto"},children:[o.jsx(n.Tooltip,{content:k.charts.line.keyboardInstructionsTooltip,ref:g,children:o.jsx(n.IconButton,{"aria-controls":"keyboardInstructions","aria-label":k.charts.line.keyboardInstructionsTooltip,"aria-expanded":Boolean(C),icon:o.jsx(r.KeyboardIcon,{}),onClick:function(){S(function(e){return!e})},onKeyDown:function(e){var n=e.shiftKey;switch(e.key){case"Escape":S(!1);break;case"Tab":!n&&b&&b.current&&w.current.find(function(e){return e.current===b.current})&&(e.preventDefault(),b.current.focus())}},variant:n.ButtonVariant.link})}),o.jsx(n.Announce,{children:o.jsxs(te,{id:"keyboardInstructions",isOpen:C,theme:v,width:"350px",children:[o.jsx(n.Paragraph,{visualStyle:n.TypographyVisualStyle.headingXSmall,style:{margin:"0 0 16px"},children:k.charts.line.keyboardInstructionsHeader}),k.charts.line.keyboardInstructions]})})]})]}),o.jsxs(n.TabPanelsContainer,{children:[o.jsx(ne,{theme:v,children:"line"===y&&o.jsx(K,l({},m,{lastFocusedScatterPoint:b,pointRefArray:w,registerPoint:F,tabRef:g,unregisterPoint:L}))}),o.jsx(ne,{theme:v,children:o.jsx(N,{data:m.data,xData:{keyValue:m.x,label:null==(i=m.componentProps)||null==(a=i.xAxis)?void 0:a.label,tickFormat:null==(c=m.componentProps)||null==(d=c.xAxis)?void 0:d.tickFormat},yData:{keyValue:m.y,tickFormat:null==(f=m.componentProps)||null==(p=f.yAxis)?void 0:p.tickFormat}})})]})]})]})}exports.Chart=s.forwardRef(re);
|
|
1
|
+
var e=require("react"),n=require("react-magma-dom"),t=require("@emotion/core"),r=require("react-magma-icons"),i=require("victory"),o=require("react/jsx-runtime");function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,n}var s=a(e);function l(){return l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},l.apply(this,arguments)}function c(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n.indexOf(t=o[r])>=0||(i[t]=e[t]);return i}function u(e,n){return n||(n=e.slice(0)),e.raw=n,e}var d,f,p,x,h,y,m=["#00507A","#8F0033","#B84900","#255200","#711E6E","#005249"],g={width:350,height:350,padding:50},b={fontFamily:'"Work Sans",Helvetica,sans-serif',fontSize:12,letterSpacing:"normal",padding:8,fill:"#3F3F3F",stroke:"transparent",strokeWidth:0},v=l({textAnchor:"middle"},b),k={area:l({style:{data:{fill:"pink"},labels:b}},g),axis:l({style:{axis:{fill:"transparent",stroke:"#8F8F8F",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"},axisLabel:l({},v,{padding:8,stroke:"transparent"}),grid:{fill:"none",stroke:"#dfdfdf",strokeLinecap:"round",strokeLinejoin:"round",pointerEvents:"painted"},ticks:{fill:"transparent",size:0,stroke:"#8F8F8F",strokeWidth:0,strokeLinecap:"round",strokeLinejoin:"round"},tickLabels:l({},b,{fill:"#3F3F3F"})}},g),polarDependentAxis:{style:{ticks:{fill:"transparent",size:1,stroke:"transparent"}}},bar:l({style:{data:{fill:"#3F3F3F",padding:8,strokeWidth:0},labels:b}},g),boxplot:l({style:{max:{padding:8,stroke:"#3F3F3F",strokeWidth:1},maxLabels:l({},b,{padding:3}),median:{padding:8,stroke:"#3F3F3F",strokeWidth:1},medianLabels:l({},b,{padding:3}),min:{padding:8,stroke:"#3F3F3F",strokeWidth:1},minLabels:l({},b,{padding:3}),q1:{padding:8,fill:"#3F3F3F"},q1Labels:l({},b,{padding:3}),q3:{padding:8,fill:"#3F3F3F"},q3Labels:l({},b,{padding:3})},boxWidth:20},g),candlestick:l({style:{data:{stroke:"#3F3F3F"},labels:l({},b,{padding:5})},candleColors:{positive:"#ffffff",negative:"#3F3F3F"}},g),chart:g,errorbar:l({borderWidth:8,style:{data:{fill:"transparent",opacity:1,stroke:"#3F3F3F",strokeWidth:2},labels:b}},g),group:l({colorScale:m},g),histogram:l({style:{data:{fill:"#3F3F3F",stroke:"pink",strokeWidth:2},labels:b}},g),legend:{colorScale:m,gutter:10,orientation:"vertical",titleOrientation:"top",style:{data:{type:"circle"},labels:b,title:l({},b,{padding:5})}},line:l({style:{data:{fill:"transparent",opacity:1,stroke:"#3F3F3F",strokeWidth:2},labels:b}},g),pie:l({colorScale:m,style:{data:{padding:8,stroke:"#DFDFDF",strokeWidth:1},labels:l({},b,{padding:20})}},g),scatter:l({style:{data:{fill:"#3F3F3F",opacity:1,stroke:"transparent",strokeWidth:0},labels:b}},g),stack:l({colorScale:m},g),tooltip:{style:l({},b,{padding:0,pointerEvents:"none"}),flyoutStyle:{stroke:"pink",strokeWidth:1,fill:"#f0f0f0",pointerEvents:"none"},flyoutPadding:5,cornerRadius:5,pointerLength:10},voronoi:l({style:{data:{fill:"transparent",stroke:"transparent",strokeWidth:0},labels:l({},b,{padding:5,pointerEvents:"none"}),flyout:{stroke:"pink",strokeWidth:1,fill:"#f0f0f0",pointerEvents:"none"}}},g)},j=n.styled(n.StyledTooltip)(d||(d=u(["\n background: ",";\n border: 1px solid ",";\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);\n box-sizing: border-box;\n color: ",";\n font-size: ",";\n font-weight: normal;\n line-height: ",";\n margin: 0;\n padding: 8px;\n width: fit-content;\n div {\n margin-bottom: 8px;\n display: flex;\n align-items: flex-start;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n"])),function(e){return e.theme.colors.neutral100},function(e){return e.theme.colors.neutral300},function(e){return e.theme.colors.neutral},function(e){return e.theme.typeScale.size02.fontSize},function(e){return e.theme.typeScale.size02.lineHeight}),w=n.styled.span(f||(f=u(["\n background: ",";\n border: ",";\n border-radius: 4px;\n height: 20px;\n width: 20px;\n margin-right: 8px;\n"])),function(e){return e.color},function(e){return e.color?"none":"3px solid black"}),F=function(e){var t=e.datum,r=e.index,i=e.showTooltip,a=e.x,l=e.y,c=s.useContext(n.ThemeContext);return i===r+"-"+t.index?o.jsx("g",{style:{pointerEvents:"none"},children:o.jsx("foreignObject",{x:a,y:l,width:"275",height:"100%",children:o.jsxs(j,{position:n.TooltipPosition.top,role:"tooltip",theme:c,children:[o.jsxs("div",{children:[o.jsx(w,{color:c.iterableColors[r]}),o.jsx("span",{children:t.label})]}),o.jsx(n.TooltipArrow,{theme:c})]})})}):null},L=function(e){var t=e.x,r=e.y,i=e.activePoints,a=e.hiddenData,l=Array.from(Array(e.dataLength-0),function(e,n){return n+0}).filter(function(e){return!a.includes(e)}),c=s.useContext(n.ThemeContext);return o.jsx("g",{style:{pointerEvents:"none"},children:o.jsx("foreignObject",{x:t,y:r,width:"275",height:"100%",children:o.jsxs(j,{"data-testid":"axis-tooltip",position:n.TooltipPosition.top,role:"tooltip",theme:c,children:[i.map(function(e,n){return o.jsxs("div",{children:[o.jsx(w,{color:c.iterableColors[l[n]]}),o.jsx("span",{children:e.label})]},n)}),o.jsx(n.TooltipArrow,{theme:c})]})})})},I=["datum","index","lineIndex","pointRefArray","registerPoint","unregisterPoint"],C=["lineIndex","pointRefArray","pointIndex","registerPoint","unregisterPoint"],S=function(e){var n=e.datum,t=e.index,r=e.lineIndex,a=e.pointRefArray,s=e.registerPoint,u=e.unregisterPoint,d=c(e,I);return o.jsx(i.Point,l({},d,{ariaLabel:n.label,pathComponent:o.jsx(P,{lineIndex:r,pointIndex:t,pointRefArray:a,registerPoint:s,unregisterPoint:u}),role:"button",tabIndex:0}))},P=function(e){var t=e.lineIndex,r=e.pointRefArray,i=e.pointIndex,a=e.registerPoint,u=e.unregisterPoint,d=c(e,C),f=n.useForceUpdate(),p=s.useRef(null);return s.useEffect(function(){return a(r,p),f(),function(){return u(r,p)}},[]),o.jsx("path",l({ref:p,"data-line-index":t,"data-point-index":i},d))},A=["events"],E=function(e){var n=e.events,t=c(e,A);return o.jsxs("g",{children:[o.jsx(i.LineSegment,l({},t,{events:n,style:{strokeWidth:"50px",stroke:"transparent"}})),o.jsx(i.LineSegment,l({},t,{events:n,style:{strokeWidth:"1px",stroke:"black",strokeOpacity:"0.2"}}))]})},T=["children","color","dataIndex","isHidden","onClick","name","focusCurrentLine","resetLineFocus"],z=s.forwardRef(function(e,t){var r=e.color,i=e.dataIndex,a=e.isHidden,u=e.onClick,d=e.name,f=e.focusCurrentLine,p=e.resetLineFocus,x=c(e,T);function h(){a||f&&"function"==typeof f&&f(i)}var y=s.useContext(n.ThemeContext);return o.jsx("div",{style:{display:"inline-flex"},onMouseEnter:h,onMouseLeave:p,children:o.jsx(n.Checkbox,l({checked:!a,color:r,containerStyle:{alignItems:"center",border:"0",boxShadow:"0 0 0",color:y.colors.neutral,display:"inline-flex",margin:"0 36px 20px 0",padding:"0"},inputStyle:{border:r?"none":"2px solid "+y.colors.neutral800,borderRadius:"4px"},labelText:d,onBlur:p,onClick:function(){u&&"function"==typeof u&&u(i),a||p&&"function"==typeof p&&p()},onFocus:h,ref:t,theme:y},x))})}),W=["axisLabel","tickLabels"],D=["style"],R=["axisLabel","tickLabels"],O=["style"],V=n.styled.div(p||(p=u(["\n max-height: 600px;\n max-width: 800px;\n svg {\n overflow: visible;\n }\n"]))),H=n.styled.div(x||(x=u([""]))),q=n.styled.div(h||(h=u(["\n padding-bottom: 24px;\n"]))),B=n.styled.p(y||(y=u(["\n color: ",";\n font-size: ",";\n"])),function(e){return e.theme.colors.neutral},function(e){return e.theme.typeScale.size02.fontSize});function K(e){var t=e.componentProps,r=(t=void 0===t?{}:t).chart,a=void 0===r?{}:r,u=t.line,d=void 0===u?{}:u,f=t.scatter,p=void 0===f?{}:f,x=t.xAxis,h=(x=void 0===x?{style:{}}:x).style,y=(h=void 0===h?{}:h).axisLabel,m=void 0===y?void 0:y,g=h.tickLabels,b=void 0===g?void 0:g,v=c(h,W),j=c(x,D),w=t.yAxis,I=(w=void 0===w?{style:{}}:w).style,C=(I=void 0===I?{}:I).axisLabel,P=void 0===C?void 0:C,A=I.tickLabels,T=void 0===A?void 0:A,K=c(I,R),M=c(w,O),U=e.data,X=void 0===U?[]:U,_=e.lastFocusedScatterPoint,G=e.pointRefArray,Z=e.registerPoint,J=e.unregisterPoint,N=e.tabRef,Q=e.x,Y=e.y,$=s.useContext(n.ThemeContext),ee=s.useContext(n.I18nContext),ne=s.useState([]),te=ne[0],re=ne[1],ie=s.useState(800),oe=ie[0],ae=ie[1],se=s.useState(null),le=se[0],ce=se[1],ue=s.useState(null),de=ue[0],fe=ue[1],pe=s.useState(!0),xe=pe[0],he=pe[1],ye=s.useState(!1),me=ye[0],ge=ye[1],be=s.useRef(null),ve=s.useRef(null);s.useEffect(function(){return Fe(),window.addEventListener("resize",Fe),window.addEventListener("keydown",Le),function(){window.removeEventListener("resize",Fe),window.removeEventListener("keydown",Le)}},[]),s.useEffect(function(){return window.addEventListener("mousemove",Ie),function(){window.removeEventListener("mousemove",Ie)}},[de]);var ke=X.map(function(e,n){return"scatter-"+n}),je=l({tickLabels:l({color:"#3f3f3f",fontSize:12},b),axisLabel:l({color:"#3f3f3f",padding:44,fontSize:14,fontWeight:"bold"},m)},v),we=l({tickLabels:l({fontSize:12},T),axisLabel:l({color:"#3f3f3f",padding:64,fontSize:14,fontWeight:"bold"},P)},K);function Fe(){be.current&&ae(be.current.clientWidth)}function Le(e){"Escape"===e.key&&(fe(null),he(!1))}function Ie(){!de&&he(!0)}function Ce(e){return null===le||le===e?1:.1}function Se(e){te.includes(e)?re(te.filter(function(n){return n!==e})):re(te.concat([e]))}function Pe(e){ce(e)}function Ae(){ce(null)}var Ee=function(e,n){if(n.current){var t=parseInt(n.current.getAttribute("data-line-index"),10);!e.includes(t)&&e.push(parseInt(n.current.getAttribute("data-line-index"),10))}return e},Te=function(e){var n=parseInt(e.current.getAttribute("data-line-index"),10),t=parseInt(e.current.getAttribute("data-point-index"),10),r=G.current.reduce(Ee,[]);return{currentLineIndex:n,currentPointIndex:t,lineIndexes:r,lowestLineIndex:r[0],highestLineIndex:r[r.length-1]}},ze=function(e,n){return function(t){return t.current&&parseInt(t.current.getAttribute("data-line-index"),10)===e&&parseInt(t.current.getAttribute("data-point-index"),10)===n}};function We(e){"Tab"===e.key&&e.shiftKey&&_&&_.current&&G.current.find(function(e){return e.current===_.current})&&(e.preventDefault(),_.current.focus())}return o.jsxs(V,{ref:be,children:[o.jsx(H,{onKeyDown:function(e){var n=e.shiftKey;switch(e.key){case"Tab":e.preventDefault(),_.current=G.current.find(function(e){return e.current===document.activeElement}).current,n?N.current&&N.current.focus():ve.current&&ve.current.focus();break;case"ArrowRight":var t=G.current.findIndex(function(e){return e.current===document.activeElement});void 0!==t&&(t===G.current.length-1?G.current[0].current.focus():G.current[t+1].current.focus());break;case"ArrowLeft":var r=G.current.findIndex(function(e){return e.current===document.activeElement});void 0!==r&&(0===r?G.current[G.current.length-1].current.focus():G.current[r-1].current.focus());break;case"ArrowUp":e.preventDefault();var i=G.current.find(function(e){return e.current===document.activeElement});if(i&&i.current){var o=Te(i),a=o.currentLineIndex,s=o.currentPointIndex,l=o.lineIndexes;if(a===o.lowestLineIndex)G.current.find(ze(o.highestLineIndex,s)).current.focus();else{var c=l[l.indexOf(a)-1];G.current.find(ze(c,s)).current.focus()}}break;case"ArrowDown":e.preventDefault();var u=G.current.find(function(e){return e.current===document.activeElement});if(u&&u.current){var d=Te(u),f=d.currentLineIndex,p=d.currentPointIndex,x=d.lineIndexes;if(f===d.highestLineIndex)G.current.find(ze(d.lowestLineIndex,p)).current.focus();else{var h=x[x.indexOf(f)+1];G.current.find(ze(h,p)).current.focus()}}}},children:o.jsxs(i.VictoryChart,l({domainPadding:32,height:400,padding:{top:0,left:80,right:0,bottom:62},theme:k,width:oe,containerComponent:o.jsx(i.VictoryVoronoiContainer,{name:"xAxisGroupLabel",voronoiBlacklist:ke,voronoiDimension:"x",labels:me&&xe?function(){return" "}:void 0,labelComponent:xe?o.jsx(i.VictoryTooltip,{flyoutComponent:o.jsx(L,{dataLength:X.length,hiddenData:te})}):void 0,role:"presentation",voronoiPadding:32})},a,{children:[o.jsx(i.VictoryAxis,l({},M,{dependentAxis:!0,style:we})),X.map(function(e,n){var t=e.data;return!te.includes(n)&&o.jsx(i.VictoryLine,l({style:{data:{opacity:Ce(n),stroke:$.iterableColors[n],strokeWidth:"3"},parent:{border:$.colors.neutral400}},data:t,labelComponent:o.jsx(o.Fragment,{}),x:Q,y:Y},d),"line"+n)}),o.jsx(i.VictoryAxis,l({},j,{style:je,gridComponent:o.jsx(E,{events:{onMouseEnter:function(){return ge(!0)},onMouseLeave:function(){return ge(!1)}}})})),X.map(function(e,n){var t=e.data;return!te.includes(n)&&o.jsx(i.VictoryScatter,l({name:"scatter-"+n,events:[{target:"data",eventHandlers:{onBlur:function(){return he(!0),fe(null),[{target:"labels",mutation:function(){return{active:void 0}}}]},onClick:function(){return[{target:"labels",mutation:function(e){return fe(e.datum.lineIndex+"-"+e.datum.index),{active:!0}}}]},onFocus:function(){return he(!1),[{target:"labels",mutation:function(e){return fe(e.datum.lineIndex+"-"+e.datum.index),{active:!0}}}]},onMouseEnter:function(){return he(!1),[{target:"labels",mutation:function(e){return fe(e.datum.lineIndex+"-"+e.datum.index),{active:!0}}}]},onMouseLeave:function(){fe(null),he(!0)}}}],style:{data:{fill:$.colors.neutral100,opacity:Ce(n),stroke:$.iterableColors[n],strokeWidth:2}},size:5,data:t.map(function(e,t){return l({index:t,lineIndex:n},e)}),dataComponent:o.jsx(S,{lineIndex:n,pointRefArray:G,registerPoint:Z,unregisterPoint:J}),labels:function(){return""},labelComponent:o.jsx(i.VictoryTooltip,{text:"",flyoutComponent:o.jsx(F,{index:n,showTooltip:de})}),x:Q,y:Y},p),"scatter"+n)})]}))}),o.jsxs(q,{children:[o.jsx(B,{theme:$,children:ee.charts.line.dataLegendsLabel}),X.map(function(e,n){var t=e.name,r=ee.charts.line.legendButtonAriaLabel.replace(/\{name\}/g,t);return o.jsx(z,{"aria-label":r,color:$.iterableColors[n],dataIndex:n,isHidden:te.includes(n),name:t,onClick:Se,onKeyDown:0===n?We:void 0,focusCurrentLine:Pe,ref:0===n?ve:void 0,resetLineFocus:Ae},n)})]})]})}function M(e){return e.toLowerCase().replace(/[^a-z 0-9]/gi,"").replace(/(?:^\w|[A-Z]|\b\w)/g,function(e,n){return 0===n?e.toLowerCase():e.toUpperCase()}).replace(/\s+/g,"")}var U,X,_,G,Z,J,N=function(e){var t=e.data,r=void 0===t?[]:t,i=e.xData,a=i.keyValue,c=i.label,u=i.tickFormat,d=i.tickValues,f=e.yData,p=f.keyValue,x=f.tickFormat,h=s.useState({columns:[],rows:[]}),y=h[0],m=h[1];return s.useEffect(function(){var e,n,t;m((e=M(a||c||"x"),n=r.reduce(function(e,n){return n.data.forEach(function(n){var t=n.x||a&&n[a];!e.includes(t)&&e.push(t)}),e},[]),t={columns:n.length>0?[{field:e,header:c||a||"X",isRowHeader:!0}]:[],rows:n.reduce(function(t,r,i){var o,a=d&&"number"==typeof r&&d.length===n.length?u&&"function"==typeof u?u(d[r-1]):d[r-1]:u&&Array.isArray(u)?u[r-1]:u&&"function"==typeof u?u(r):r;return t.push(((o={})[e]=a,o.id=i,o)),t},[])},r.reduce(function(e,n){var r=n.name,i=n.data,o=M(r);return e.columns.push({field:o,header:r}),i.forEach(function(n,r){var i,a=n.y||0===n.y?n.y:p&&n[p];e.rows[r]=l({},e.rows[r],((i={id:t.rows.length>0?r+1:r})[o]=x&&"function"==typeof x?x(a):a,i))}),e},t)))},[r]),o.jsx(n.Card,{children:y.rows.length>0?o.jsx(n.Datagrid,{hasPagination:!1,columns:y.columns,rows:y.rows}):o.jsx(n.Spinner,{})})},Q=["description","title","testId","type"],Y=n.styled.span(U||(U=u(["\n color: ",";\n font-size: ",";\n font-weight: 600;\n font-family: ",";\n line-height: ",";\n margin: 0 0 12px 0;\n"])),function(e){return e.theme.colors.neutral},function(e){return e.theme.typeScale.size04.fontSize},function(e){return e.theme.bodyFont},function(e){return e.theme.typeScale.size04.lineHeight}),$=n.styled(n.Paragraph)(X||(X=u(["\n font-size: ",";\n margin: 0 0 18px 0;\n"])),function(e){return e.theme.typeScale.size02.fontSize}),ee=n.styled(n.TabsContainer)(_||(_=u(["\n width: 800px;\n ul {\n box-shadow: inset 0 -1px 0 ",";\n }\n"])),function(e){return e.theme.colors.neutral300}),ne=n.styled(n.TabPanel)(G||(G=u(["\n padding: 22px 0;\n"]))),te=n.styled(n.Card)(Z||(Z=u(["\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n display: ",";\n right: ",";\n max-height: ",";\n opacity: ",";\n outline: 0;\n overflow-y: auto;\n padding: ","\n ",";\n position: absolute;\n transition: opacity 0.3s;\n white-space: nowrap;\n z-index: 2;\n\n ","\n"])),function(e){return e.isOpen?"block":"none"},function(e){return e.theme.spaceScale.spacing02},function(e){return e.maxHeight?e.maxHeight:e.theme.dropdown.content.maxHeight},function(e){return e.isOpen?"1":"0"},function(e){return e.theme.spaceScale.spacing05},function(e){return e.theme.spaceScale.spacing05},function(e){return e.width&&t.css(J||(J=u(["\n white-space: normal;\n width: ",";\n "])),e.width)});function re(e,t){var i,a,u,d,f,p,x=e.description,h=e.title,y=e.type,m=c(e,Q),g=s.useRef(null),b=s.useRef(null),v=s.useContext(n.ThemeContext),k=s.useContext(n.I18nContext),j=n.useDescendants(),w=j[0],F=j[1],L=j[2],I=s.useState(!1),C=I[0],S=I[1];return o.jsxs("div",{ref:t,children:[o.jsx(Y,{theme:v,children:h}),x&&o.jsx($,{theme:v,visualStyle:n.TypographyVisualStyle.bodySmall,children:x}),o.jsxs(ee,{theme:v,children:[o.jsxs(n.Tabs,{children:[o.jsx(n.Tab,{children:k.charts.line.chartTabLabel}),o.jsx(n.Tab,{children:k.charts.line.dataTabLabel}),o.jsxs("div",{onBlur:function(){S(!1)},style:{display:"inline-block",marginLeft:"auto"},children:[o.jsx(n.Tooltip,{content:k.charts.line.keyboardInstructionsTooltip,ref:g,children:o.jsx(n.IconButton,{"aria-controls":"keyboardInstructions","aria-label":k.charts.line.keyboardInstructionsTooltip,"aria-expanded":Boolean(C),icon:o.jsx(r.KeyboardIcon,{}),onClick:function(){S(function(e){return!e})},onKeyDown:function(e){var n=e.shiftKey;switch(e.key){case"Escape":S(!1);break;case"Tab":!n&&b&&b.current&&w.current.find(function(e){return e.current===b.current})&&(e.preventDefault(),b.current.focus())}},variant:n.ButtonVariant.link})}),o.jsx(n.Announce,{children:o.jsxs(te,{id:"keyboardInstructions",isOpen:C,theme:v,width:"350px",children:[o.jsx(n.Paragraph,{visualStyle:n.TypographyVisualStyle.headingXSmall,style:{margin:"0 0 16px"},children:k.charts.line.keyboardInstructionsHeader}),k.charts.line.keyboardInstructions]})})]})]}),o.jsxs(n.TabPanelsContainer,{children:[o.jsx(ne,{theme:v,children:"line"===y&&o.jsx(K,l({},m,{lastFocusedScatterPoint:b,pointRefArray:w,registerPoint:F,tabRef:g,unregisterPoint:L}))}),o.jsx(ne,{theme:v,children:o.jsx(N,{data:m.data,xData:{keyValue:m.x,label:null==(i=m.componentProps)||null==(a=i.xAxis)?void 0:a.label,tickFormat:null==(u=m.componentProps)||null==(d=u.xAxis)?void 0:d.tickFormat},yData:{keyValue:m.y,tickFormat:null==(f=m.componentProps)||null==(p=f.yAxis)?void 0:p.tickFormat}})})]})]})]})}exports.Chart=s.forwardRef(re);
|
|
2
2
|
//# sourceMappingURL=charts.js.map
|
package/dist/charts.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"charts.js","sources":["../src/components/LineChart/magma-charts.ts","../src/components/LineChart/GraphTooltip.tsx","../src/components/LineChart/CustomPointComponent.tsx","../src/components/LineChart/CustomAxisComponent.tsx","../src/components/LineChart/LegendButton.tsx","../src/components/LineChart/LineChart.tsx","../src/components/LineChart/ChartDataTable.tsx","../src/components/LineChart/Chart.tsx"],"sourcesContent":["// *\n// * Colors\n// *\n// const yellow200 = '#FFF59D';\n// const deepOrange600 = '#F4511E';\n// const lime300 = '#DCE775';\n// const lightGreen500 = '#8BC34A';\n// const teal700 = '#00796B';\n// const cyan900 = '#006064';\n\n// const colors = [\n// '#0085CC',\n// '#E0004D',\n// '#FA6600',\n// '#48A200',\n// '#B12FAD',\n// '#00A393',\n// ];\n\nconst colors = [\n '#00507A',\n '#8F0033',\n '#B84900',\n '#255200',\n '#711E6E',\n '#005249',\n];\n\nconst blueGrey50 = '#DFDFDF';\nconst blueGrey300 = '#8F8F8F';\nconst blueGrey700 = '#3F3F3F';\nconst grey900 = 'pink';\n\n// *\n// * Typography\n// *\nconst sansSerif = '\"Work Sans\",Helvetica,sans-serif';\nconst letterSpacing = 'normal';\nconst fontSize = 12;\n\n// *\n// * Layout\n// *\nconst padding = 8;\nconst baseProps = {\n width: 350,\n height: 350,\n padding: 50,\n};\n\n// *\n// * Labels\n// *\nconst baseLabelStyles = {\n fontFamily: sansSerif,\n fontSize,\n letterSpacing,\n padding,\n fill: blueGrey700,\n stroke: 'transparent',\n strokeWidth: 0,\n};\n\nconst centeredLabelStyles = { textAnchor: 'middle', ...baseLabelStyles };\n// *\n// * Strokes\n// *\n// const strokeDasharray = '10, 5';\nconst strokeLinecap = 'round';\nconst strokeLinejoin = 'round';\n\nexport const magmaTheme: any = {\n area: {\n style: {\n data: {\n fill: grey900,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n axis: {\n style: {\n axis: {\n fill: 'transparent',\n stroke: blueGrey300,\n strokeWidth: 1,\n strokeLinecap,\n strokeLinejoin,\n },\n axisLabel: {\n ...centeredLabelStyles,\n padding,\n stroke: 'transparent',\n },\n grid: {\n fill: 'none',\n stroke: '#dfdfdf',\n //strokeDasharray,\n strokeLinecap,\n strokeLinejoin,\n pointerEvents: 'painted',\n },\n ticks: {\n fill: 'transparent',\n size: 0,\n stroke: blueGrey300,\n strokeWidth: 0,\n strokeLinecap,\n strokeLinejoin,\n },\n tickLabels: {\n ...baseLabelStyles,\n fill: blueGrey700,\n },\n },\n ...baseProps,\n },\n polarDependentAxis: {\n style: {\n ticks: {\n fill: 'transparent',\n size: 1,\n stroke: 'transparent',\n },\n },\n },\n bar: {\n style: {\n data: {\n fill: blueGrey700,\n padding,\n strokeWidth: 0,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n boxplot: {\n style: {\n max: { padding, stroke: blueGrey700, strokeWidth: 1 },\n maxLabels: { ...baseLabelStyles, padding: 3 },\n median: { padding, stroke: blueGrey700, strokeWidth: 1 },\n medianLabels: { ...baseLabelStyles, padding: 3 },\n min: { padding, stroke: blueGrey700, strokeWidth: 1 },\n minLabels: { ...baseLabelStyles, padding: 3 },\n q1: { padding, fill: blueGrey700 },\n q1Labels: { ...baseLabelStyles, padding: 3 },\n q3: { padding, fill: blueGrey700 },\n q3Labels: { ...baseLabelStyles, padding: 3 },\n },\n boxWidth: 20,\n ...baseProps,\n },\n candlestick: {\n style: {\n data: {\n stroke: blueGrey700,\n },\n labels: { ...baseLabelStyles, padding: 5 },\n },\n candleColors: {\n positive: '#ffffff',\n negative: blueGrey700,\n },\n ...baseProps,\n },\n chart: baseProps,\n errorbar: {\n borderWidth: 8,\n style: {\n data: {\n fill: 'transparent',\n opacity: 1,\n stroke: blueGrey700,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n group: {\n colorScale: colors,\n ...baseProps,\n },\n histogram: {\n style: {\n data: {\n fill: blueGrey700,\n stroke: grey900,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n legend: {\n colorScale: colors,\n gutter: 10,\n orientation: 'vertical',\n titleOrientation: 'top',\n style: {\n data: {\n type: 'circle',\n },\n labels: baseLabelStyles,\n title: { ...baseLabelStyles, padding: 5 },\n },\n },\n line: {\n style: {\n data: {\n fill: 'transparent',\n opacity: 1,\n stroke: blueGrey700,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n pie: {\n colorScale: colors,\n style: {\n data: {\n padding,\n stroke: blueGrey50,\n strokeWidth: 1,\n },\n labels: { ...baseLabelStyles, padding: 20 },\n },\n ...baseProps,\n },\n scatter: {\n style: {\n data: {\n fill: blueGrey700,\n opacity: 1,\n stroke: 'transparent',\n strokeWidth: 0,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n stack: {\n colorScale: colors,\n ...baseProps,\n },\n tooltip: {\n style: { ...baseLabelStyles, padding: 0, pointerEvents: 'none' },\n flyoutStyle: {\n stroke: grey900,\n strokeWidth: 1,\n fill: '#f0f0f0',\n pointerEvents: 'none',\n },\n flyoutPadding: 5,\n cornerRadius: 5,\n pointerLength: 10,\n },\n voronoi: {\n style: {\n data: {\n fill: 'transparent',\n stroke: 'transparent',\n strokeWidth: 0,\n },\n labels: { ...baseLabelStyles, padding: 5, pointerEvents: 'none' },\n flyout: {\n stroke: grey900,\n strokeWidth: 1,\n fill: '#f0f0f0',\n pointerEvents: 'none',\n },\n },\n ...baseProps,\n },\n};\n","import * as React from 'react';\nimport {\n StyledTooltip,\n ThemeContext,\n TooltipArrow,\n TooltipPosition,\n ThemeInterface,\n styled,\n} from 'react-magma-dom';\n\nconst StyledGraphTooltip = styled(StyledTooltip)`\n background: ${(props: any) => props.theme.colors.neutral100};\n border: 1px solid ${(props: any) => props.theme.colors.neutral300};\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);\n box-sizing: border-box;\n color: ${(props: any) => props.theme.colors.neutral};\n font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};\n font-weight: normal;\n line-height: ${(props: any) => props.theme.typeScale.size02.lineHeight};\n margin: 0;\n padding: 8px;\n width: fit-content;\n div {\n margin-bottom: 8px;\n display: flex;\n align-items: flex-start;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n`;\n\nconst TooltipColorSwatch = styled.span`\n background: ${(props: any) => props.color};\n border: ${(props: any) => (props.color ? 'none' : '3px solid black')};\n border-radius: 4px;\n height: 20px;\n width: 20px;\n margin-right: 8px;\n`;\n\nexport const GraphTooltip = (props: any) => {\n const { datum, index, showTooltip, x, y } = props;\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const linePointIndex = `${index}-${datum.index}`;\n\n return showTooltip === linePointIndex ? (\n <g style={{ pointerEvents: 'none' }}>\n <foreignObject x={x} y={y} width=\"275\" height=\"100%\">\n <StyledGraphTooltip\n position={TooltipPosition.top}\n role=\"tooltip\"\n theme={theme}\n >\n <div>\n <TooltipColorSwatch color={theme.iterableColors[index]} />\n <span>{datum.label}</span>\n </div>\n <TooltipArrow theme={theme} />\n </StyledGraphTooltip>\n </foreignObject>\n </g>\n ) : null;\n};\n\nexport const AxisTooltip = (props: any) => {\n const { x, y, activePoints, hiddenData, dataLength } = props;\n\n const pointsIndexes = Array.from(\n Array(dataLength - 0),\n (_, i) => i + 0\n ).filter(i => !hiddenData.includes(i));\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n\n return (\n <g style={{ pointerEvents: 'none' }}>\n <foreignObject x={x} y={y} width=\"275\" height=\"100%\">\n <StyledGraphTooltip\n data-testid=\"axis-tooltip\"\n position={TooltipPosition.top}\n role=\"tooltip\"\n theme={theme}\n >\n {activePoints.map((point: any, i: number) => (\n <div key={i}>\n <TooltipColorSwatch\n color={theme.iterableColors[pointsIndexes[i]]}\n />\n <span>{point.label}</span>\n </div>\n ))}\n <TooltipArrow theme={theme} />\n </StyledGraphTooltip>\n </foreignObject>\n </g>\n );\n};\n","import * as React from 'react';\nimport { Point, PointProps } from 'victory';\nimport { useForceUpdate } from 'react-magma-dom';\n\nexport interface CustomScatterDataComponentInterface extends PointProps {\n lineIndex: number;\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n}\n\nexport interface CustomPointComponentInterface {\n lineIndex: number;\n pointIndex: PointProps['index'];\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n}\n\nexport const CustomScatterDataComponent = (\n props: CustomScatterDataComponentInterface\n) => {\n const {\n datum,\n index: pointIndex,\n lineIndex,\n pointRefArray,\n registerPoint,\n unregisterPoint,\n ...other\n } = props;\n return (\n <Point\n {...other}\n ariaLabel={datum.label}\n pathComponent={\n <CustomPointComponent\n lineIndex={lineIndex}\n pointIndex={pointIndex}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n unregisterPoint={unregisterPoint}\n />\n }\n role=\"button\"\n tabIndex={0}\n />\n );\n};\n\nexport const CustomPointComponent = (props: CustomPointComponentInterface) => {\n const {\n lineIndex,\n pointRefArray,\n pointIndex,\n registerPoint,\n unregisterPoint,\n ...other\n } = props;\n const forceUpdate = useForceUpdate();\n const ref = React.useRef<SVGPathElement | null>(null);\n\n React.useEffect(() => {\n registerPoint(pointRefArray, ref as React.MutableRefObject<Element>);\n\n forceUpdate();\n\n return () =>\n unregisterPoint(pointRefArray, ref as React.MutableRefObject<Element>);\n }, []);\n\n return (\n <path\n ref={ref}\n data-line-index={lineIndex}\n data-point-index={pointIndex}\n {...other}\n />\n );\n};\n","import * as React from 'react';\nimport { LineSegment, LineSegmentProps } from 'victory';\n\nexport const CustomAxisComponent: React.FunctionComponent<LineSegmentProps> = ({\n events,\n ...props\n}: any) => {\n return (\n <g>\n <LineSegment\n {...props}\n events={events}\n style={{\n strokeWidth: '50px',\n stroke: 'transparent',\n }}\n />\n <LineSegment\n {...props}\n events={events}\n style={{\n strokeWidth: '1px',\n stroke: 'black',\n strokeOpacity: '0.2',\n }}\n />\n </g>\n );\n};\n","import * as React from 'react';\nimport { ThemeContext, Checkbox } from 'react-magma-dom';\n\nexport interface DataTableProps {\n name?: string;\n color?: string;\n}\n\nexport const LegendButton = React.forwardRef<HTMLButtonElement, any>(\n (props, ref) => {\n const {\n children,\n color,\n dataIndex,\n isHidden,\n onClick,\n name,\n focusCurrentLine,\n resetLineFocus,\n ...other\n } = props;\n\n function handleClick() {\n onClick && typeof onClick === 'function' && onClick(dataIndex);\n\n if (!isHidden) {\n resetLineFocus &&\n typeof resetLineFocus === 'function' &&\n resetLineFocus();\n }\n }\n\n function handleOnMouseEnterOrFocus() {\n if (!isHidden) {\n focusCurrentLine &&\n typeof focusCurrentLine === 'function' &&\n focusCurrentLine(dataIndex);\n }\n }\n\n const theme = React.useContext(ThemeContext);\n\n return (\n <div\n style={{ display: 'inline-flex' }}\n onMouseEnter={handleOnMouseEnterOrFocus}\n onMouseLeave={resetLineFocus}\n >\n <Checkbox\n checked={!isHidden}\n color={color}\n containerStyle={{\n alignItems: 'center',\n border: '0',\n boxShadow: '0 0 0',\n color: theme.colors.neutral,\n display: 'inline-flex',\n margin: '0 36px 20px 0',\n padding: '0',\n }}\n inputStyle={{\n border: color ? `none` : `2px solid ${theme.colors.neutral800}`,\n borderRadius: '4px',\n }}\n labelText={name}\n onBlur={resetLineFocus}\n onClick={handleClick}\n onFocus={handleOnMouseEnterOrFocus}\n ref={ref}\n theme={theme}\n {...other}\n />\n </div>\n );\n }\n);\n","import * as React from 'react';\nimport {\n VictoryAxis,\n VictoryAxisProps,\n VictoryChart,\n VictoryChartProps,\n VictoryLine,\n VictoryLineProps,\n VictoryScatter,\n VictoryScatterProps,\n VictoryTooltip,\n VictoryVoronoiContainer,\n} from 'victory';\n\nimport {\n I18nContext,\n ThemeContext,\n styled,\n ThemeInterface,\n I18nInterface,\n} from 'react-magma-dom';\n\nimport { magmaTheme } from './magma-charts';\nimport { AxisTooltip, GraphTooltip } from './GraphTooltip';\nimport { CustomScatterDataComponent } from './CustomPointComponent';\nimport { CustomAxisComponent } from './CustomAxisComponent';\nimport { LegendButton } from './LegendButton';\n\nexport type LineChartAxisStyle = VictoryAxisProps['style'];\nexport type DataGetterPropType = VictoryLineProps['x'];\n\nexport type ChartDataOptions =\n | {\n label: string;\n x: string | number;\n y: string | number;\n [key: string]: any;\n }\n | { label: string; [key: string]: any }\n | any;\n\nexport interface LineChartData<T> {\n name: string;\n data: T[];\n}\n\nexport interface LineChartComponentProps {\n chart?: VictoryChartProps;\n line?: VictoryLineProps;\n scatter?: VictoryScatterProps;\n xAxis?: VictoryAxisProps;\n yAxis?: VictoryAxisProps;\n}\n\n// NOTE: These props are manually copied to line-chart.mdx\nexport interface LineChartProps<T extends ChartDataOptions> {\n /**\n * Props passed to each component that makes up the line chart. See `victory` for accepted props.\n */\n componentProps?: LineChartComponentProps;\n /**\n * Data used to build the chart\n */\n data?: LineChartData<T>[];\n isMulti?: boolean;\n /**\n * @internal\n */\n lastFocusedScatterPoint: React.MutableRefObject<SVGPathElement | null>;\n /**\n * @internal\n */\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n /**\n * @internal\n */\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n /**\n * @internal\n */\n tabRef: React.MutableRefObject<HTMLButtonElement | null>;\n /**\n * @internal\n */\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n /**\n * Value of x key in chart data\n */\n x?: keyof T;\n /**\n * Value of y key in chart data\n */\n y?: keyof T;\n}\n\nconst LineChartContainer = styled.div`\n max-height: 600px;\n max-width: 800px;\n svg {\n overflow: visible;\n }\n`;\n\nconst VictoryChartContainer = styled.div``;\n\nconst DataLegendsContainer = styled.div`\n padding-bottom: 24px;\n`;\n\nconst DataLegendsDescription = styled.p`\n color: ${(props: any) => props.theme.colors.neutral};\n font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};\n`;\n\nexport function LineChart<T>(props: LineChartProps<T>) {\n const {\n componentProps: {\n chart = {},\n line = {},\n scatter = {},\n xAxis: {\n style: {\n axisLabel: xAxisLabel = undefined,\n tickLabels: xTickLabels = undefined,\n ...xRest\n } = {},\n ...xAxisOther\n } = { style: {} },\n yAxis: {\n style: {\n axisLabel: yAxisLabel = undefined,\n tickLabels: yTickLabels = undefined,\n ...yRest\n } = {},\n ...yAxisOther\n } = { style: {} },\n } = {},\n data = [],\n lastFocusedScatterPoint,\n pointRefArray,\n registerPoint,\n unregisterPoint,\n tabRef,\n x,\n y,\n } = props;\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n\n const [hiddenData, setHiddenData] = React.useState<number[]>([]);\n const [width, setWidth] = React.useState<number>(800);\n const [focusedLine, setFocusedLine] = React.useState<number | null>(null);\n const [showTooltip, setShowTooltip] = React.useState<string | null>(null);\n const [showXAxisLabel, setShowXAxisLabel] = React.useState<boolean>(true);\n const [hoveringOnXAxisLine, setHoveringOnXAxisLine] =\n React.useState<boolean>(false);\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const firstLegendButtonRef = React.useRef<HTMLButtonElement>(null);\n\n React.useEffect(() => {\n updateWidth();\n\n window.addEventListener('resize', updateWidth);\n window.addEventListener('keydown', handleEsc);\n\n return () => {\n window.removeEventListener('resize', updateWidth);\n window.removeEventListener('keydown', handleEsc);\n };\n }, []);\n\n React.useEffect(() => {\n window.addEventListener('mousemove', handleMouseMove);\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n };\n }, [showTooltip]);\n\n const scatterNames: string[] = data.map((_, i) => `scatter-${i}`);\n\n const xAxisStyles = {\n tickLabels: {\n color: '#3f3f3f',\n fontSize: 12,\n ...xTickLabels,\n },\n axisLabel: {\n color: '#3f3f3f',\n padding: 44,\n fontSize: 14,\n fontWeight: 'bold',\n ...xAxisLabel,\n },\n ...xRest,\n };\n\n const yAxisStyles = {\n tickLabels: {\n fontSize: 12,\n ...yTickLabels,\n },\n axisLabel: {\n color: '#3f3f3f',\n padding: 64,\n fontSize: 14,\n fontWeight: 'bold',\n ...yAxisLabel,\n },\n ...yRest,\n };\n\n function updateWidth() {\n containerRef.current && setWidth(containerRef.current.clientWidth);\n }\n\n function handleEsc(event: KeyboardEvent): any {\n if (event.key === 'Escape') {\n setShowTooltip(null);\n setShowXAxisLabel(false);\n }\n }\n\n function handleMouseMove() {\n !showTooltip && setShowXAxisLabel(true);\n }\n\n function setLineOpacity(index: number) {\n return focusedLine === null ? 1 : focusedLine === index ? 1 : 0.1;\n }\n\n function handleLegendClick(dataIndex: number) {\n if (hiddenData.includes(dataIndex)) {\n setHiddenData(hiddenData.filter(item => item !== dataIndex));\n } else {\n setHiddenData(hiddenData.concat([dataIndex]));\n }\n }\n\n function focusCurrentLine(dataIndex: number) {\n setFocusedLine(dataIndex);\n }\n\n function resetLineFocus() {\n setFocusedLine(null);\n }\n\n const buildLineIndexes = (\n acc: number[],\n point: React.MutableRefObject<Element>\n ) => {\n if (point.current) {\n const currentLineIndex = parseInt(\n point.current.getAttribute('data-line-index') as string,\n 10\n );\n !acc.includes(currentLineIndex) &&\n acc.push(\n parseInt(point.current.getAttribute('data-line-index') as string, 10)\n );\n }\n return acc;\n };\n\n const buildLineIndexData = (point: React.MutableRefObject<Element>) => {\n const currentLineIndex = parseInt(\n point.current.getAttribute('data-line-index') as string,\n 10\n );\n const currentPointIndex = parseInt(\n point.current.getAttribute('data-point-index') as string,\n 10\n );\n const lineIndexes = pointRefArray.current.reduce(buildLineIndexes, []);\n\n const lowestLineIndex = lineIndexes[0];\n const highestLineIndex = lineIndexes[lineIndexes.length - 1];\n\n return {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n };\n };\n\n const findPointToFocus =\n (lineIndex: number, pointIndex: number) =>\n (point: React.MutableRefObject<Element>) =>\n point.current &&\n parseInt(point.current.getAttribute('data-line-index') as string, 10) ===\n lineIndex &&\n parseInt(point.current.getAttribute('data-point-index') as string, 10) ===\n pointIndex;\n\n // eslint-disable-next-line complexity\n function handleChartContainerKeyDown(event: React.KeyboardEvent) {\n const { key, shiftKey } = event;\n switch (key) {\n case 'Tab': {\n event.preventDefault();\n lastFocusedScatterPoint.current = (\n pointRefArray.current.find(\n point => point.current === document.activeElement\n ) as React.MutableRefObject<Element>\n ).current as SVGPathElement;\n shiftKey\n ? tabRef.current && tabRef.current.focus()\n : firstLegendButtonRef.current &&\n firstLegendButtonRef.current.focus();\n break;\n }\n case 'ArrowRight': {\n const focusedPointIndex = pointRefArray.current.findIndex(\n point => point.current === document.activeElement\n );\n\n if (focusedPointIndex !== undefined) {\n focusedPointIndex === pointRefArray.current.length - 1\n ? (pointRefArray.current[0]?.current as HTMLButtonElement)?.focus()\n : (\n pointRefArray.current[focusedPointIndex + 1]\n .current as HTMLButtonElement\n ).focus();\n }\n break;\n }\n case 'ArrowLeft': {\n const focusedPointIndex = pointRefArray.current.findIndex(\n point => point.current === document.activeElement\n );\n\n if (focusedPointIndex !== undefined) {\n focusedPointIndex === 0\n ? (\n pointRefArray.current[pointRefArray.current.length - 1]\n .current as HTMLButtonElement\n ).focus()\n : (\n pointRefArray.current[focusedPointIndex - 1]\n .current as HTMLButtonElement\n ).focus();\n }\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n const focusedPoint = pointRefArray.current.find(\n point => point.current === document.activeElement\n );\n\n if (focusedPoint && focusedPoint.current) {\n const {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n } = buildLineIndexData(focusedPoint);\n\n switch (currentLineIndex) {\n case lowestLineIndex: {\n (\n (\n pointRefArray.current.find(\n findPointToFocus(highestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n break;\n }\n default: {\n const nextLowestLineIndex =\n lineIndexes[lineIndexes.indexOf(currentLineIndex) - 1];\n (\n (\n pointRefArray.current.find(\n findPointToFocus(nextLowestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n }\n }\n }\n break;\n }\n case 'ArrowDown': {\n event.preventDefault();\n const focusedPoint = pointRefArray.current.find(\n point => point.current === document.activeElement\n );\n\n if (focusedPoint && focusedPoint.current) {\n const {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n } = buildLineIndexData(focusedPoint);\n\n switch (currentLineIndex) {\n case highestLineIndex: {\n (\n (\n pointRefArray.current.find(\n findPointToFocus(lowestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n break;\n }\n default: {\n const nextHighestLineIndex =\n lineIndexes[lineIndexes.indexOf(currentLineIndex) + 1];\n (\n (\n pointRefArray.current.find(\n findPointToFocus(nextHighestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n }\n }\n }\n break;\n }\n }\n }\n\n function handleFirstLegendButtonKeydown(event: React.KeyboardEvent) {\n const { key, shiftKey } = event;\n switch (key) {\n case 'Tab': {\n if (\n shiftKey &&\n lastFocusedScatterPoint &&\n lastFocusedScatterPoint.current &&\n pointRefArray.current.find(\n point => point.current === lastFocusedScatterPoint.current\n )\n ) {\n event.preventDefault();\n lastFocusedScatterPoint.current.focus();\n }\n break;\n }\n }\n }\n\n return (\n <LineChartContainer ref={containerRef}>\n <VictoryChartContainer onKeyDown={handleChartContainerKeyDown}>\n <VictoryChart\n domainPadding={32}\n height={400}\n padding={{ top: 0, left: 80, right: 0, bottom: 62 }}\n theme={magmaTheme}\n width={width}\n containerComponent={\n <VictoryVoronoiContainer\n name=\"xAxisGroupLabel\"\n voronoiBlacklist={scatterNames}\n voronoiDimension=\"x\"\n labels={\n hoveringOnXAxisLine && showXAxisLabel ? () => ` ` : undefined\n }\n labelComponent={\n showXAxisLabel ? (\n <VictoryTooltip\n flyoutComponent={\n <AxisTooltip\n dataLength={data.length}\n hiddenData={hiddenData}\n />\n }\n />\n ) : undefined\n }\n role=\"presentation\"\n voronoiPadding={32}\n />\n }\n {...chart}\n >\n <VictoryAxis {...yAxisOther} dependentAxis style={yAxisStyles} />\n {data.map(\n ({ data: dataset }, i) =>\n !hiddenData.includes(i) && (\n <VictoryLine\n style={{\n data: {\n opacity: setLineOpacity(i),\n stroke: theme.iterableColors[i],\n strokeWidth: '3',\n },\n parent: { border: theme.colors.neutral400 },\n }}\n key={`line${i}`}\n data={dataset as unknown as any[]}\n labelComponent={<></>}\n x={x as DataGetterPropType}\n y={y as DataGetterPropType}\n {...line}\n />\n )\n )}\n <VictoryAxis\n {...xAxisOther}\n style={xAxisStyles}\n gridComponent={\n <CustomAxisComponent\n events={{\n onMouseEnter: () => setHoveringOnXAxisLine(true),\n onMouseLeave: () => setHoveringOnXAxisLine(false),\n }}\n />\n }\n />\n {data.map(\n ({ data: dataset }, i) =>\n !hiddenData.includes(i) && (\n <VictoryScatter\n name={`scatter-${i}`}\n events={[\n {\n target: 'data',\n eventHandlers: {\n onBlur: () => {\n setShowXAxisLabel(true);\n setShowTooltip(null);\n return [\n {\n target: 'labels',\n mutation: () => ({ active: undefined }),\n },\n ];\n },\n onClick: () => {\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onFocus: () => {\n setShowXAxisLabel(false);\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onMouseEnter: () => {\n setShowXAxisLabel(false);\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onMouseLeave: () => {\n setShowTooltip(null);\n setShowXAxisLabel(true);\n },\n },\n },\n ]}\n style={{\n data: {\n fill: theme.colors.neutral100,\n opacity: setLineOpacity(i),\n stroke: theme.iterableColors[i],\n strokeWidth: 2,\n },\n }}\n size={5}\n data={\n dataset.map((datum, index) => ({\n index,\n lineIndex: i,\n ...datum,\n })) as unknown as any[]\n }\n dataComponent={\n <CustomScatterDataComponent\n lineIndex={i}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n unregisterPoint={unregisterPoint}\n />\n }\n labels={() => ''}\n labelComponent={\n <VictoryTooltip\n text=\"\"\n flyoutComponent={\n <GraphTooltip index={i} showTooltip={showTooltip} />\n }\n />\n }\n key={`scatter${i}`}\n x={x as DataGetterPropType}\n y={y as DataGetterPropType}\n {...scatter}\n />\n )\n )}\n </VictoryChart>\n </VictoryChartContainer>\n\n <DataLegendsContainer>\n <DataLegendsDescription theme={theme}>\n {i18n.charts.line.dataLegendsLabel}\n </DataLegendsDescription>\n {data.map(({ name }, i) => {\n const legendButtonAriaLabel =\n i18n.charts.line.legendButtonAriaLabel.replace(/\\{name\\}/g, name);\n\n return (\n <LegendButton\n aria-label={legendButtonAriaLabel}\n color={theme.iterableColors[i]}\n dataIndex={i}\n isHidden={hiddenData.includes(i)}\n key={i}\n name={name}\n onClick={handleLegendClick}\n onKeyDown={i === 0 ? handleFirstLegendButtonKeydown : undefined}\n focusCurrentLine={focusCurrentLine}\n ref={i === 0 ? firstLegendButtonRef : undefined}\n resetLineFocus={resetLineFocus}\n />\n );\n })}\n </DataLegendsContainer>\n </LineChartContainer>\n );\n}\n","import * as React from 'react';\nimport { VictoryAxisProps } from 'victory';\n\nimport { Card, Datagrid, Spinner } from 'react-magma-dom';\n\nexport function toCamelCase(str: string) {\n return str\n .toLowerCase()\n .replace(/[^a-z 0-9]/gi, '')\n .replace(/(?:^\\w|[A-Z]|\\b\\w)/g, (ltr, index) =>\n index === 0 ? ltr.toLowerCase() : ltr.toUpperCase()\n )\n .replace(/\\s+/g, '');\n}\n\nexport interface DataTableProps {\n data?: any[];\n xData: {\n keyValue?: string | number | symbol;\n label?: VictoryAxisProps['label'];\n tickFormat?: Partial<VictoryAxisProps['tickFormat']>;\n tickValues?: VictoryAxisProps['tickValues'];\n };\n yData: {\n keyValue?: string | number | symbol;\n tickFormat?: Partial<VictoryAxisProps['tickFormat']>;\n };\n}\n\nexport const ChartDataTable = (props: DataTableProps) => {\n const {\n data = [],\n xData: {\n keyValue: xKeyValue,\n label: xAxisLabel,\n tickFormat: xTickFormat,\n tickValues: xTickValues,\n },\n yData: { keyValue: yKeyValue, tickFormat: yTickFormat },\n } = props;\n const [dataForTable, setDataForTable] = React.useState({\n columns: [],\n rows: [],\n });\n\n React.useEffect(() => {\n setDataForTable(convertData());\n }, [data]);\n\n function convertData() {\n const xField = toCamelCase((xKeyValue || xAxisLabel || 'x') as string);\n const xTickValuesArray = data.reduce((valuesArray, { data: dataset }) => {\n dataset.forEach((datum: any) => {\n const value = datum.x || (xKeyValue && datum[xKeyValue]);\n !valuesArray.includes(value) && valuesArray.push(value);\n });\n\n return valuesArray;\n }, []);\n\n let baseTableData = {\n columns:\n xTickValuesArray.length > 0\n ? [\n {\n field: xField,\n header: xAxisLabel || xKeyValue || 'X',\n isRowHeader: true,\n },\n ]\n : [],\n rows: xTickValuesArray.reduce(\n (agg: any[], tick: number, index: number) => {\n const tickValue =\n xTickValues &&\n typeof tick === 'number' &&\n xTickValues.length === xTickValuesArray.length\n ? xTickFormat && typeof xTickFormat === 'function'\n ? xTickFormat(xTickValues[tick - 1])\n : xTickValues[tick - 1]\n : xTickFormat && Array.isArray(xTickFormat)\n ? xTickFormat[tick - 1]\n : xTickFormat && typeof xTickFormat === 'function'\n ? xTickFormat(tick)\n : tick;\n agg.push({\n [xField]: tickValue,\n id: index,\n });\n\n return agg;\n },\n []\n ),\n };\n\n return data.reduce((tableData, datum) => {\n const { name: header, data: dataset } = datum;\n const field = toCamelCase(header);\n\n tableData.columns.push({\n field,\n header,\n });\n\n dataset.forEach((d: any, i: number) => {\n const yValue =\n d.y || d.y === 0 ? d.y : undefined || (yKeyValue && d[yKeyValue]);\n tableData.rows[i] = {\n ...tableData.rows[i],\n id: baseTableData.rows.length > 0 ? i + 1 : i,\n [field]:\n yTickFormat && typeof yTickFormat === 'function'\n ? yTickFormat(yValue)\n : yValue,\n };\n });\n\n return tableData;\n }, baseTableData);\n }\n\n return (\n <Card>\n {dataForTable.rows.length > 0 ? (\n <Datagrid\n hasPagination={false}\n columns={dataForTable.columns}\n rows={dataForTable.rows}\n />\n ) : (\n <Spinner />\n )}\n </Card>\n );\n};\n","import * as React from 'react';\nimport {\n I18nContext,\n styled,\n ThemeContext,\n useDescendants,\n} from 'react-magma-dom';\nimport { css } from '@emotion/core';\nimport { KeyboardIcon } from 'react-magma-icons';\n\nimport { LineChart, LineChartProps } from './LineChart';\nimport { ChartDataTable } from './ChartDataTable';\nimport {\n Announce,\n ButtonVariant,\n Card,\n IconButton,\n Paragraph,\n TabsContainer,\n Tabs,\n Tab,\n TabPanelsContainer,\n TabPanel,\n Tooltip,\n TypographyVisualStyle,\n} from 'react-magma-dom';\n\ninterface BaseChartProps {\n /**\n * Description of what the line chart data represents placed above the chart\n */\n description?: string;\n /**\n * @internal\n */\n testId?: string;\n /**\n * Title of the line chart\n */\n title: string;\n /**\n * Type of chart - for now just 'line' is accepted\n */\n type: string;\n}\nexport interface ChartProps<T extends any>\n extends BaseChartProps,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\n LineChartProps<T> {}\n\nconst StyledTitle = styled.span`\n color: ${props => props.theme.colors.neutral};\n font-size: ${props => props.theme.typeScale.size04.fontSize};\n font-weight: 600;\n font-family: ${props => props.theme.bodyFont};\n line-height: ${props => props.theme.typeScale.size04.lineHeight};\n margin: 0 0 12px 0;\n`;\n\nconst StyledParagraph = styled(Paragraph)`\n font-size: ${props => props.theme.typeScale.size02.fontSize};\n margin: 0 0 18px 0;\n`;\n\nconst StyledTabsContainer = styled(TabsContainer)`\n width: 800px;\n ul {\n box-shadow: inset 0 -1px 0 ${props => props.theme.colors.neutral300};\n }\n`;\n\nconst StyledTabPanel = styled(TabPanel)`\n padding: 22px 0;\n`;\n\nconst KeyboardInstructionsCard = styled(Card)<{\n isOpen?: boolean;\n maxHeight?: string;\n width?: string;\n}>`\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n display: ${props => (props.isOpen ? 'block' : 'none')};\n right: ${props => props.theme.spaceScale.spacing02};\n max-height: ${props =>\n props.maxHeight ? props.maxHeight : props.theme.dropdown.content.maxHeight};\n opacity: ${props => (props.isOpen ? '1' : '0')};\n outline: 0;\n overflow-y: auto;\n padding: ${props => props.theme.spaceScale.spacing05}\n ${props => props.theme.spaceScale.spacing05};\n position: absolute;\n transition: opacity 0.3s;\n white-space: nowrap;\n z-index: 2;\n\n ${props =>\n props.width &&\n css`\n white-space: normal;\n width: ${props.width};\n `}\n`;\n\nfunction BaseChart<T>(props: ChartProps<T>, ref: React.Ref<HTMLDivElement>) {\n const { description, title, testId, type, ...other } = props;\n const keyboardInstructionsRef = React.useRef<HTMLButtonElement>(null);\n const lastFocusedScatterPoint = React.useRef<SVGPathElement>(null);\n const theme = React.useContext(ThemeContext);\n const i18n = React.useContext(I18nContext);\n\n const [pointRefArray, registerPoint, unregisterPoint] = useDescendants();\n\n const [isKeyboardInstructionsOpen, setIsKeyboardInstructionsOpen] =\n React.useState<boolean>(false);\n\n function handleKeyboardInstructionsButtonBlur() {\n setIsKeyboardInstructionsOpen(false);\n }\n\n function handleKeyboardInstructionsButtonClick() {\n setIsKeyboardInstructionsOpen(prevOpen => !prevOpen);\n }\n\n function handleKeyboardInstructionsButtonKeydown(event: React.KeyboardEvent) {\n const { key, shiftKey } = event;\n\n switch (key) {\n case 'Escape': {\n setIsKeyboardInstructionsOpen(false);\n break;\n }\n case 'Tab': {\n if (\n !shiftKey &&\n lastFocusedScatterPoint &&\n lastFocusedScatterPoint.current &&\n pointRefArray.current.find(\n point => point.current === lastFocusedScatterPoint.current\n )\n ) {\n event.preventDefault();\n lastFocusedScatterPoint.current.focus();\n }\n break;\n }\n }\n }\n\n return (\n <div ref={ref}>\n <StyledTitle theme={theme}>{title}</StyledTitle>\n {description && (\n <StyledParagraph\n theme={theme}\n visualStyle={TypographyVisualStyle.bodySmall}\n >\n {description}\n </StyledParagraph>\n )}\n <StyledTabsContainer theme={theme}>\n <Tabs>\n <Tab>{i18n.charts.line.chartTabLabel}</Tab>\n <Tab>{i18n.charts.line.dataTabLabel}</Tab>\n <div\n onBlur={handleKeyboardInstructionsButtonBlur}\n style={{\n display: 'inline-block',\n marginLeft: 'auto',\n }}\n >\n <Tooltip\n content={i18n.charts.line.keyboardInstructionsTooltip}\n ref={keyboardInstructionsRef}\n >\n <IconButton\n aria-controls=\"keyboardInstructions\"\n aria-label={i18n.charts.line.keyboardInstructionsTooltip}\n aria-expanded={Boolean(isKeyboardInstructionsOpen)}\n icon={<KeyboardIcon />}\n onClick={handleKeyboardInstructionsButtonClick}\n onKeyDown={handleKeyboardInstructionsButtonKeydown}\n variant={ButtonVariant.link}\n />\n </Tooltip>\n <Announce>\n <KeyboardInstructionsCard\n id=\"keyboardInstructions\"\n isOpen={isKeyboardInstructionsOpen}\n theme={theme}\n width=\"350px\"\n >\n <Paragraph\n visualStyle={TypographyVisualStyle.headingXSmall}\n style={{ margin: '0 0 16px' }}\n >\n {i18n.charts.line.keyboardInstructionsHeader}\n </Paragraph>\n {i18n.charts.line.keyboardInstructions}\n </KeyboardInstructionsCard>\n </Announce>\n </div>\n </Tabs>\n <TabPanelsContainer>\n <StyledTabPanel theme={theme}>\n {type === 'line' && (\n <LineChart<T>\n {...other}\n lastFocusedScatterPoint={lastFocusedScatterPoint}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n tabRef={keyboardInstructionsRef}\n unregisterPoint={unregisterPoint}\n />\n )}\n </StyledTabPanel>\n <StyledTabPanel theme={theme}>\n <ChartDataTable\n data={other.data}\n xData={{\n keyValue: other.x,\n label: other.componentProps?.xAxis?.label,\n tickFormat: other.componentProps?.xAxis?.tickFormat,\n }}\n yData={{\n keyValue: other.y,\n tickFormat: other.componentProps?.yAxis?.tickFormat,\n }}\n />\n </StyledTabPanel>\n </TabPanelsContainer>\n </StyledTabsContainer>\n </div>\n );\n}\n\nexport const Chart = React.forwardRef(BaseChart) as <T>(\n props: ChartProps<T> & { ref?: React.MutableRefObject<HTMLDivElement> }\n) => ReturnType<typeof BaseChart>;\n"],"names":["width","height","padding","fontFamily","fontSize","letterSpacing","fill","stroke","strokeWidth","textAnchor","baseLabelStyles","area","style","data","labels","baseProps","axis","strokeLinecap","strokeLinejoin","axisLabel","centeredLabelStyles","grid","pointerEvents","ticks","size","tickLabels","polarDependentAxis","bar","boxplot","max","maxLabels","median","medianLabels","min","minLabels","q1","q1Labels","q3","q3Labels","boxWidth","candlestick","candleColors","positive","negative","chart","errorbar","borderWidth","opacity","group","colorScale","colors","histogram","legend","gutter","orientation","titleOrientation","type","title","line","pie","scatter","stack","tooltip","flyoutStyle","flyoutPadding","cornerRadius","pointerLength","voronoi","flyout","styled","StyledTooltip","props","theme","neutral100","neutral300","neutral","typeScale","size02","lineHeight","span","color","datum","index","showTooltip","x","y","React","useContext","ThemeContext","_jsx","_jsxs","StyledGraphTooltip","position","TooltipPosition","top","role","TooltipColorSwatch","iterableColors","label","TooltipArrow","activePoints","hiddenData","Array","from","dataLength","_","i","filter","includes","map","point","pointsIndexes","pointIndex","lineIndex","pointRefArray","registerPoint","unregisterPoint","other","Point","ariaLabel","pathComponent","CustomPointComponent","tabIndex","useForceUpdate","useRef","useEffect","ref","forceUpdate","events","LineSegment","strokeOpacity","forwardRef","children","dataIndex","isHidden","onClick","name","focusCurrentLine","resetLineFocus","display","onMouseEnter","handleOnMouseEnterOrFocus","onMouseLeave","Checkbox","checked","containerStyle","alignItems","border","boxShadow","margin","inputStyle","neutral800","borderRadius","labelText","onBlur","onFocus","div","p","componentProps","_props$componentProps","xAxis","_props$componentProps5","_props$componentProps6","xAxisLabel","undefined","xTickLabels","xRest","xAxisOther","yAxis","_props$componentProps9","_props$componentProps10","yAxisLabel","yTickLabels","yRest","yAxisOther","lastFocusedScatterPoint","tabRef","I18nContext","useState","setHiddenData","setWidth","focusedLine","setFocusedLine","setShowTooltip","showXAxisLabel","setShowXAxisLabel","hoveringOnXAxisLine","setHoveringOnXAxisLine","updateWidth","window","addEventListener","handleEsc","removeEventListener","handleMouseMove","fontWeight","containerRef","current","clientWidth","event","key","item","concat","acc","parseInt","getAttribute","currentLineIndex","push","reduce","buildLineIndexes","currentPointIndex","lineIndexes","lowestLineIndex","highestLineIndex","length","shiftKey","find","preventDefault","focus","LineChartContainer","VictoryChartContainer","onKeyDown","document","activeElement","firstLegendButtonRef","findIndex","focusedPointIndex","_pointRefArray$curren","_pointRefArray$curren2","focusedPoint","buildLineIndexData","findPointToFocus","indexOf","nextLowestLineIndex","nextHighestLineIndex","VictoryChart","domainPadding","left","right","bottom","magmaTheme","containerComponent","VictoryVoronoiContainer","voronoiBlacklist","scatterNames","voronoiDimension","labelComponent","VictoryTooltip","flyoutComponent","AxisTooltip","voronoiPadding","VictoryAxis","dependentAxis","yAxisStyles","VictoryLine","setLineOpacity","parent","neutral400","dataset","xAxisStyles","gridComponent","CustomAxisComponent","VictoryScatter","target","eventHandlers","mutation","active","dataComponent","CustomScatterDataComponent","text","GraphTooltip","DataLegendsContainer","DataLegendsDescription","i18n","charts","dataLegendsLabel","legendButtonAriaLabel","replace","LegendButton","handleLegendClick","handleFirstLegendButtonKeydown","str","toLowerCase","ltr","toUpperCase","xData","xKeyValue","keyValue","xTickFormat","tickFormat","xTickValues","tickValues","yData","yKeyValue","yTickFormat","columns","rows","dataForTable","setDataForTable","toCamelCase","valuesArray","forEach","value","xTickValuesArray","field","xField","header","isRowHeader","agg","tick","isArray","tickValue","id","tableData","d","baseTableData","yValue","Card","Datagrid","hasPagination","Spinner","size04","bodyFont","Paragraph","TabsContainer","TabPanel","isOpen","spaceScale","spacing02","maxHeight","dropdown","content","spacing05","css","description","useDescendants","isKeyboardInstructionsOpen","setIsKeyboardInstructionsOpen","StyledTitle","StyledParagraph","visualStyle","TypographyVisualStyle","bodySmall","StyledTabsContainer","Tabs","Tab","chartTabLabel","dataTabLabel","marginLeft","Tooltip","keyboardInstructionsTooltip","keyboardInstructionsRef","IconButton","Boolean","icon","KeyboardIcon","prevOpen","variant","ButtonVariant","link","Announce","KeyboardInstructionsCard","headingXSmall","keyboardInstructionsHeader","keyboardInstructions","TabPanelsContainer","StyledTabPanel","LineChart","ChartDataTable","_other$componentProps","_other$componentProps2","_other$componentProps3","_other$componentProps4","_other$componentProps5","_other$componentProps6","BaseChart"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"charts.js","sources":["../src/components/LineChart/magma-charts.ts","../src/components/LineChart/GraphTooltip.tsx","../src/components/LineChart/CustomPointComponent.tsx","../src/components/LineChart/CustomAxisComponent.tsx","../src/components/LineChart/LegendButton.tsx","../src/components/LineChart/LineChart.tsx","../src/components/LineChart/ChartDataTable.tsx","../src/components/LineChart/Chart.tsx"],"sourcesContent":["// *\n// * Colors\n// *\n// const yellow200 = '#FFF59D';\n// const deepOrange600 = '#F4511E';\n// const lime300 = '#DCE775';\n// const lightGreen500 = '#8BC34A';\n// const teal700 = '#00796B';\n// const cyan900 = '#006064';\n\n// const colors = [\n// '#0085CC',\n// '#E0004D',\n// '#FA6600',\n// '#48A200',\n// '#B12FAD',\n// '#00A393',\n// ];\n\nconst colors = [\n '#00507A',\n '#8F0033',\n '#B84900',\n '#255200',\n '#711E6E',\n '#005249',\n];\n\nconst blueGrey50 = '#DFDFDF';\nconst blueGrey300 = '#8F8F8F';\nconst blueGrey700 = '#3F3F3F';\nconst grey900 = 'pink';\n\n// *\n// * Typography\n// *\nconst sansSerif = '\"Work Sans\",Helvetica,sans-serif';\nconst letterSpacing = 'normal';\nconst fontSize = 12;\n\n// *\n// * Layout\n// *\nconst padding = 8;\nconst baseProps = {\n width: 350,\n height: 350,\n padding: 50,\n};\n\n// *\n// * Labels\n// *\nconst baseLabelStyles = {\n fontFamily: sansSerif,\n fontSize,\n letterSpacing,\n padding,\n fill: blueGrey700,\n stroke: 'transparent',\n strokeWidth: 0,\n};\n\nconst centeredLabelStyles = { textAnchor: 'middle', ...baseLabelStyles };\n// *\n// * Strokes\n// *\n// const strokeDasharray = '10, 5';\nconst strokeLinecap = 'round';\nconst strokeLinejoin = 'round';\n\nexport const magmaTheme: any = {\n area: {\n style: {\n data: {\n fill: grey900,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n axis: {\n style: {\n axis: {\n fill: 'transparent',\n stroke: blueGrey300,\n strokeWidth: 1,\n strokeLinecap,\n strokeLinejoin,\n },\n axisLabel: {\n ...centeredLabelStyles,\n padding,\n stroke: 'transparent',\n },\n grid: {\n fill: 'none',\n stroke: '#dfdfdf',\n //strokeDasharray,\n strokeLinecap,\n strokeLinejoin,\n pointerEvents: 'painted',\n },\n ticks: {\n fill: 'transparent',\n size: 0,\n stroke: blueGrey300,\n strokeWidth: 0,\n strokeLinecap,\n strokeLinejoin,\n },\n tickLabels: {\n ...baseLabelStyles,\n fill: blueGrey700,\n },\n },\n ...baseProps,\n },\n polarDependentAxis: {\n style: {\n ticks: {\n fill: 'transparent',\n size: 1,\n stroke: 'transparent',\n },\n },\n },\n bar: {\n style: {\n data: {\n fill: blueGrey700,\n padding,\n strokeWidth: 0,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n boxplot: {\n style: {\n max: { padding, stroke: blueGrey700, strokeWidth: 1 },\n maxLabels: { ...baseLabelStyles, padding: 3 },\n median: { padding, stroke: blueGrey700, strokeWidth: 1 },\n medianLabels: { ...baseLabelStyles, padding: 3 },\n min: { padding, stroke: blueGrey700, strokeWidth: 1 },\n minLabels: { ...baseLabelStyles, padding: 3 },\n q1: { padding, fill: blueGrey700 },\n q1Labels: { ...baseLabelStyles, padding: 3 },\n q3: { padding, fill: blueGrey700 },\n q3Labels: { ...baseLabelStyles, padding: 3 },\n },\n boxWidth: 20,\n ...baseProps,\n },\n candlestick: {\n style: {\n data: {\n stroke: blueGrey700,\n },\n labels: { ...baseLabelStyles, padding: 5 },\n },\n candleColors: {\n positive: '#ffffff',\n negative: blueGrey700,\n },\n ...baseProps,\n },\n chart: baseProps,\n errorbar: {\n borderWidth: 8,\n style: {\n data: {\n fill: 'transparent',\n opacity: 1,\n stroke: blueGrey700,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n group: {\n colorScale: colors,\n ...baseProps,\n },\n histogram: {\n style: {\n data: {\n fill: blueGrey700,\n stroke: grey900,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n legend: {\n colorScale: colors,\n gutter: 10,\n orientation: 'vertical',\n titleOrientation: 'top',\n style: {\n data: {\n type: 'circle',\n },\n labels: baseLabelStyles,\n title: { ...baseLabelStyles, padding: 5 },\n },\n },\n line: {\n style: {\n data: {\n fill: 'transparent',\n opacity: 1,\n stroke: blueGrey700,\n strokeWidth: 2,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n pie: {\n colorScale: colors,\n style: {\n data: {\n padding,\n stroke: blueGrey50,\n strokeWidth: 1,\n },\n labels: { ...baseLabelStyles, padding: 20 },\n },\n ...baseProps,\n },\n scatter: {\n style: {\n data: {\n fill: blueGrey700,\n opacity: 1,\n stroke: 'transparent',\n strokeWidth: 0,\n },\n labels: baseLabelStyles,\n },\n ...baseProps,\n },\n stack: {\n colorScale: colors,\n ...baseProps,\n },\n tooltip: {\n style: { ...baseLabelStyles, padding: 0, pointerEvents: 'none' },\n flyoutStyle: {\n stroke: grey900,\n strokeWidth: 1,\n fill: '#f0f0f0',\n pointerEvents: 'none',\n },\n flyoutPadding: 5,\n cornerRadius: 5,\n pointerLength: 10,\n },\n voronoi: {\n style: {\n data: {\n fill: 'transparent',\n stroke: 'transparent',\n strokeWidth: 0,\n },\n labels: { ...baseLabelStyles, padding: 5, pointerEvents: 'none' },\n flyout: {\n stroke: grey900,\n strokeWidth: 1,\n fill: '#f0f0f0',\n pointerEvents: 'none',\n },\n },\n ...baseProps,\n },\n};\n","import * as React from 'react';\nimport {\n StyledTooltip,\n ThemeContext,\n TooltipArrow,\n TooltipPosition,\n ThemeInterface,\n styled,\n} from 'react-magma-dom';\n\nconst StyledGraphTooltip = styled(StyledTooltip)`\n background: ${(props: any) => props.theme.colors.neutral100};\n border: 1px solid ${(props: any) => props.theme.colors.neutral300};\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);\n box-sizing: border-box;\n color: ${(props: any) => props.theme.colors.neutral};\n font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};\n font-weight: normal;\n line-height: ${(props: any) => props.theme.typeScale.size02.lineHeight};\n margin: 0;\n padding: 8px;\n width: fit-content;\n div {\n margin-bottom: 8px;\n display: flex;\n align-items: flex-start;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n`;\n\nconst TooltipColorSwatch = styled.span`\n background: ${(props: any) => props.color};\n border: ${(props: any) => (props.color ? 'none' : '3px solid black')};\n border-radius: 4px;\n height: 20px;\n width: 20px;\n margin-right: 8px;\n`;\n\nexport const GraphTooltip = (props: any) => {\n const { datum, index, showTooltip, x, y } = props;\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const linePointIndex = `${index}-${datum.index}`;\n\n return showTooltip === linePointIndex ? (\n <g style={{ pointerEvents: 'none' }}>\n <foreignObject x={x} y={y} width=\"275\" height=\"100%\">\n <StyledGraphTooltip\n position={TooltipPosition.top}\n role=\"tooltip\"\n theme={theme}\n >\n <div>\n <TooltipColorSwatch color={theme.iterableColors[index]} />\n <span>{datum.label}</span>\n </div>\n <TooltipArrow theme={theme} />\n </StyledGraphTooltip>\n </foreignObject>\n </g>\n ) : null;\n};\n\nexport const AxisTooltip = (props: any) => {\n const { x, y, activePoints, hiddenData, dataLength } = props;\n\n const pointsIndexes = Array.from(\n Array(dataLength - 0),\n (_, i) => i + 0\n ).filter(i => !hiddenData.includes(i));\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n\n return (\n <g style={{ pointerEvents: 'none' }}>\n <foreignObject x={x} y={y} width=\"275\" height=\"100%\">\n <StyledGraphTooltip\n data-testid=\"axis-tooltip\"\n position={TooltipPosition.top}\n role=\"tooltip\"\n theme={theme}\n >\n {activePoints.map((point: any, i: number) => (\n <div key={i}>\n <TooltipColorSwatch\n color={theme.iterableColors[pointsIndexes[i]]}\n />\n <span>{point.label}</span>\n </div>\n ))}\n <TooltipArrow theme={theme} />\n </StyledGraphTooltip>\n </foreignObject>\n </g>\n );\n};\n","import * as React from 'react';\nimport { Point, PointProps } from 'victory';\nimport { useForceUpdate } from 'react-magma-dom';\n\nexport interface CustomScatterDataComponentInterface extends PointProps {\n lineIndex: number;\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n}\n\nexport interface CustomPointComponentInterface {\n lineIndex: number;\n pointIndex: PointProps['index'];\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n}\n\nexport const CustomScatterDataComponent = (\n props: CustomScatterDataComponentInterface\n) => {\n const {\n datum,\n index: pointIndex,\n lineIndex,\n pointRefArray,\n registerPoint,\n unregisterPoint,\n ...other\n } = props;\n return (\n <Point\n {...other}\n ariaLabel={datum.label}\n pathComponent={\n <CustomPointComponent\n lineIndex={lineIndex}\n pointIndex={pointIndex}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n unregisterPoint={unregisterPoint}\n />\n }\n role=\"button\"\n tabIndex={0}\n />\n );\n};\n\nexport const CustomPointComponent = (props: CustomPointComponentInterface) => {\n const {\n lineIndex,\n pointRefArray,\n pointIndex,\n registerPoint,\n unregisterPoint,\n ...other\n } = props;\n const forceUpdate = useForceUpdate();\n const ref = React.useRef<SVGPathElement | null>(null);\n\n React.useEffect(() => {\n registerPoint(pointRefArray, ref as React.MutableRefObject<Element>);\n\n forceUpdate();\n\n return () =>\n unregisterPoint(pointRefArray, ref as React.MutableRefObject<Element>);\n }, []);\n\n return (\n <path\n ref={ref}\n data-line-index={lineIndex}\n data-point-index={pointIndex}\n {...other}\n />\n );\n};\n","import * as React from 'react';\nimport { LineSegment, LineSegmentProps } from 'victory';\n\nexport const CustomAxisComponent: React.FunctionComponent<LineSegmentProps> = ({\n events,\n ...props\n}: any) => {\n return (\n <g>\n <LineSegment\n {...props}\n events={events}\n style={{\n strokeWidth: '50px',\n stroke: 'transparent',\n }}\n />\n <LineSegment\n {...props}\n events={events}\n style={{\n strokeWidth: '1px',\n stroke: 'black',\n strokeOpacity: '0.2',\n }}\n />\n </g>\n );\n};\n","import * as React from 'react';\nimport { ThemeContext, Checkbox } from 'react-magma-dom';\n\nexport interface DataTableProps {\n name?: string;\n color?: string;\n}\n\nexport const LegendButton = React.forwardRef<HTMLButtonElement, any>(\n (props, ref) => {\n const {\n children,\n color,\n dataIndex,\n isHidden,\n onClick,\n name,\n focusCurrentLine,\n resetLineFocus,\n ...other\n } = props;\n\n function handleClick() {\n onClick && typeof onClick === 'function' && onClick(dataIndex);\n\n if (!isHidden) {\n resetLineFocus &&\n typeof resetLineFocus === 'function' &&\n resetLineFocus();\n }\n }\n\n function handleOnMouseEnterOrFocus() {\n if (!isHidden) {\n focusCurrentLine &&\n typeof focusCurrentLine === 'function' &&\n focusCurrentLine(dataIndex);\n }\n }\n\n const theme = React.useContext(ThemeContext);\n\n return (\n <div\n style={{ display: 'inline-flex' }}\n onMouseEnter={handleOnMouseEnterOrFocus}\n onMouseLeave={resetLineFocus}\n >\n <Checkbox\n checked={!isHidden}\n color={color}\n containerStyle={{\n alignItems: 'center',\n border: '0',\n boxShadow: '0 0 0',\n color: theme.colors.neutral,\n display: 'inline-flex',\n margin: '0 36px 20px 0',\n padding: '0',\n }}\n inputStyle={{\n border: color ? `none` : `2px solid ${theme.colors.neutral800}`,\n borderRadius: '4px',\n }}\n labelText={name}\n onBlur={resetLineFocus}\n onClick={handleClick}\n onFocus={handleOnMouseEnterOrFocus}\n ref={ref}\n theme={theme}\n {...other}\n />\n </div>\n );\n }\n);\n","import * as React from 'react';\nimport {\n VictoryAxis,\n VictoryAxisProps,\n VictoryChart,\n VictoryChartProps,\n VictoryLine,\n VictoryLineProps,\n VictoryScatter,\n VictoryScatterProps,\n VictoryTooltip,\n VictoryVoronoiContainer,\n} from 'victory';\n\nimport {\n I18nContext,\n ThemeContext,\n styled,\n ThemeInterface,\n I18nInterface,\n} from 'react-magma-dom';\n\nimport { magmaTheme } from './magma-charts';\nimport { AxisTooltip, GraphTooltip } from './GraphTooltip';\nimport { CustomScatterDataComponent } from './CustomPointComponent';\nimport { CustomAxisComponent } from './CustomAxisComponent';\nimport { LegendButton } from './LegendButton';\n\nexport type LineChartAxisStyle = VictoryAxisProps['style'];\nexport type DataGetterPropType = VictoryLineProps['x'];\n\nexport type ChartDataOptions =\n | {\n label: string;\n x: string | number;\n y: string | number;\n [key: string]: any;\n }\n | { label: string; [key: string]: any }\n | any;\n\nexport interface LineChartData<T> {\n name: string;\n data: T[];\n}\n\nexport interface LineChartComponentProps {\n chart?: VictoryChartProps;\n line?: VictoryLineProps;\n scatter?: VictoryScatterProps;\n xAxis?: VictoryAxisProps;\n yAxis?: VictoryAxisProps;\n}\n\n// NOTE: These props are manually copied to line-chart.mdx\nexport interface LineChartProps<T extends ChartDataOptions> {\n /**\n * Props passed to each component that makes up the line chart. See `victory` for accepted props.\n */\n componentProps?: LineChartComponentProps;\n /**\n * Data used to build the chart\n */\n data?: LineChartData<T>[];\n isMulti?: boolean;\n /**\n * @internal\n */\n lastFocusedScatterPoint: React.MutableRefObject<SVGPathElement | null>;\n /**\n * @internal\n */\n pointRefArray: React.MutableRefObject<React.MutableRefObject<Element>[]>;\n /**\n * @internal\n */\n registerPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n /**\n * @internal\n */\n tabRef: React.MutableRefObject<HTMLButtonElement | null>;\n /**\n * @internal\n */\n unregisterPoint: (\n refArray: React.MutableRefObject<React.MutableRefObject<Element>[]>,\n ref: React.MutableRefObject<Element>\n ) => void;\n /**\n * Value of x key in chart data\n */\n x?: keyof T;\n /**\n * Value of y key in chart data\n */\n y?: keyof T;\n}\n\nconst LineChartContainer = styled.div`\n max-height: 600px;\n max-width: 800px;\n svg {\n overflow: visible;\n }\n`;\n\nconst VictoryChartContainer = styled.div``;\n\nconst DataLegendsContainer = styled.div`\n padding-bottom: 24px;\n`;\n\nconst DataLegendsDescription = styled.p`\n color: ${(props: any) => props.theme.colors.neutral};\n font-size: ${(props: any) => props.theme.typeScale.size02.fontSize};\n`;\n\nexport function LineChart<T>(props: LineChartProps<T>) {\n const {\n componentProps: {\n chart = {},\n line = {},\n scatter = {},\n xAxis: {\n style: {\n axisLabel: xAxisLabel = undefined,\n tickLabels: xTickLabels = undefined,\n ...xRest\n } = {},\n ...xAxisOther\n } = { style: {} },\n yAxis: {\n style: {\n axisLabel: yAxisLabel = undefined,\n tickLabels: yTickLabels = undefined,\n ...yRest\n } = {},\n ...yAxisOther\n } = { style: {} },\n } = {},\n data = [],\n lastFocusedScatterPoint,\n pointRefArray,\n registerPoint,\n unregisterPoint,\n tabRef,\n x,\n y,\n } = props;\n\n const theme: ThemeInterface = React.useContext(ThemeContext);\n const i18n: I18nInterface = React.useContext(I18nContext);\n\n const [hiddenData, setHiddenData] = React.useState<number[]>([]);\n const [width, setWidth] = React.useState<number>(800);\n const [focusedLine, setFocusedLine] = React.useState<number | null>(null);\n const [showTooltip, setShowTooltip] = React.useState<string | null>(null);\n const [showXAxisLabel, setShowXAxisLabel] = React.useState<boolean>(true);\n const [hoveringOnXAxisLine, setHoveringOnXAxisLine] =\n React.useState<boolean>(false);\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const firstLegendButtonRef = React.useRef<HTMLButtonElement>(null);\n\n React.useEffect(() => {\n updateWidth();\n\n window.addEventListener('resize', updateWidth);\n window.addEventListener('keydown', handleEsc);\n\n return () => {\n window.removeEventListener('resize', updateWidth);\n window.removeEventListener('keydown', handleEsc);\n };\n }, []);\n\n React.useEffect(() => {\n window.addEventListener('mousemove', handleMouseMove);\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove);\n };\n }, [showTooltip]);\n\n const scatterNames: string[] = data.map((_, i) => `scatter-${i}`);\n\n const xAxisStyles = {\n tickLabels: {\n color: '#3f3f3f',\n fontSize: 12,\n ...xTickLabels,\n },\n axisLabel: {\n color: '#3f3f3f',\n padding: 44,\n fontSize: 14,\n fontWeight: 'bold',\n ...xAxisLabel,\n },\n ...xRest,\n };\n\n const yAxisStyles = {\n tickLabels: {\n fontSize: 12,\n ...yTickLabels,\n },\n axisLabel: {\n color: '#3f3f3f',\n padding: 64,\n fontSize: 14,\n fontWeight: 'bold',\n ...yAxisLabel,\n },\n ...yRest,\n };\n\n function updateWidth() {\n containerRef.current && setWidth(containerRef.current.clientWidth);\n }\n\n function handleEsc(event: KeyboardEvent): any {\n if (event.key === 'Escape') {\n setShowTooltip(null);\n setShowXAxisLabel(false);\n }\n }\n\n function handleMouseMove() {\n !showTooltip && setShowXAxisLabel(true);\n }\n\n function setLineOpacity(index: number) {\n return focusedLine === null ? 1 : focusedLine === index ? 1 : 0.1;\n }\n\n function handleLegendClick(dataIndex: number) {\n if (hiddenData.includes(dataIndex)) {\n setHiddenData(hiddenData.filter(item => item !== dataIndex));\n } else {\n setHiddenData(hiddenData.concat([dataIndex]));\n }\n }\n\n function focusCurrentLine(dataIndex: number) {\n setFocusedLine(dataIndex);\n }\n\n function resetLineFocus() {\n setFocusedLine(null);\n }\n\n const buildLineIndexes = (\n acc: number[],\n point: React.MutableRefObject<Element>\n ) => {\n if (point.current) {\n const currentLineIndex = parseInt(\n point.current.getAttribute('data-line-index') as string,\n 10\n );\n !acc.includes(currentLineIndex) &&\n acc.push(\n parseInt(point.current.getAttribute('data-line-index') as string, 10)\n );\n }\n return acc;\n };\n\n const buildLineIndexData = (point: React.MutableRefObject<Element>) => {\n const currentLineIndex = parseInt(\n point.current.getAttribute('data-line-index') as string,\n 10\n );\n const currentPointIndex = parseInt(\n point.current.getAttribute('data-point-index') as string,\n 10\n );\n const lineIndexes = pointRefArray.current.reduce(buildLineIndexes, []);\n\n const lowestLineIndex = lineIndexes[0];\n const highestLineIndex = lineIndexes[lineIndexes.length - 1];\n\n return {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n };\n };\n\n const findPointToFocus =\n (lineIndex: number, pointIndex: number) =>\n (point: React.MutableRefObject<Element>) =>\n point.current &&\n parseInt(point.current.getAttribute('data-line-index') as string, 10) ===\n lineIndex &&\n parseInt(point.current.getAttribute('data-point-index') as string, 10) ===\n pointIndex;\n\n // eslint-disable-next-line complexity\n function handleChartContainerKeyDown(event: React.KeyboardEvent) {\n const { key, shiftKey } = event;\n switch (key) {\n case 'Tab': {\n event.preventDefault();\n lastFocusedScatterPoint.current = (\n pointRefArray.current.find(\n point => point.current === document.activeElement\n ) as React.MutableRefObject<Element>\n ).current as SVGPathElement;\n shiftKey\n ? tabRef.current && tabRef.current.focus()\n : firstLegendButtonRef.current &&\n firstLegendButtonRef.current.focus();\n break;\n }\n case 'ArrowRight': {\n const focusedPointIndex = pointRefArray.current.findIndex(\n point => point.current === document.activeElement\n );\n\n if (focusedPointIndex !== undefined) {\n focusedPointIndex === pointRefArray.current.length - 1\n ? (pointRefArray.current[0].current as HTMLButtonElement).focus()\n : (\n pointRefArray.current[focusedPointIndex + 1]\n .current as HTMLButtonElement\n ).focus();\n }\n break;\n }\n case 'ArrowLeft': {\n const focusedPointIndex = pointRefArray.current.findIndex(\n point => point.current === document.activeElement\n );\n\n if (focusedPointIndex !== undefined) {\n focusedPointIndex === 0\n ? (\n pointRefArray.current[pointRefArray.current.length - 1]\n .current as HTMLButtonElement\n ).focus()\n : (\n pointRefArray.current[focusedPointIndex - 1]\n .current as HTMLButtonElement\n ).focus();\n }\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n const focusedPoint = pointRefArray.current.find(\n point => point.current === document.activeElement\n );\n\n if (focusedPoint && focusedPoint.current) {\n const {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n } = buildLineIndexData(focusedPoint);\n\n switch (currentLineIndex) {\n case lowestLineIndex: {\n (\n (\n pointRefArray.current.find(\n findPointToFocus(highestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n break;\n }\n default: {\n const nextLowestLineIndex =\n lineIndexes[lineIndexes.indexOf(currentLineIndex) - 1];\n (\n (\n pointRefArray.current.find(\n findPointToFocus(nextLowestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n }\n }\n }\n break;\n }\n case 'ArrowDown': {\n event.preventDefault();\n const focusedPoint = pointRefArray.current.find(\n point => point.current === document.activeElement\n );\n\n if (focusedPoint && focusedPoint.current) {\n const {\n currentLineIndex,\n currentPointIndex,\n lineIndexes,\n lowestLineIndex,\n highestLineIndex,\n } = buildLineIndexData(focusedPoint);\n\n switch (currentLineIndex) {\n case highestLineIndex: {\n (\n (\n pointRefArray.current.find(\n findPointToFocus(lowestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n break;\n }\n default: {\n const nextHighestLineIndex =\n lineIndexes[lineIndexes.indexOf(currentLineIndex) + 1];\n (\n (\n pointRefArray.current.find(\n findPointToFocus(nextHighestLineIndex, currentPointIndex)\n ) as React.MutableRefObject<Element>\n ).current as HTMLButtonElement\n ).focus();\n }\n }\n }\n break;\n }\n }\n }\n\n function handleFirstLegendButtonKeydown(event: React.KeyboardEvent) {\n const { key, shiftKey } = event;\n switch (key) {\n case 'Tab': {\n if (\n shiftKey &&\n lastFocusedScatterPoint &&\n lastFocusedScatterPoint.current &&\n pointRefArray.current.find(\n point => point.current === lastFocusedScatterPoint.current\n )\n ) {\n event.preventDefault();\n lastFocusedScatterPoint.current.focus();\n }\n break;\n }\n }\n }\n\n return (\n <LineChartContainer ref={containerRef}>\n <VictoryChartContainer onKeyDown={handleChartContainerKeyDown}>\n <VictoryChart\n domainPadding={32}\n height={400}\n padding={{ top: 0, left: 80, right: 0, bottom: 62 }}\n theme={magmaTheme}\n width={width}\n containerComponent={\n <VictoryVoronoiContainer\n name=\"xAxisGroupLabel\"\n voronoiBlacklist={scatterNames}\n voronoiDimension=\"x\"\n labels={\n hoveringOnXAxisLine && showXAxisLabel ? () => ` ` : undefined\n }\n labelComponent={\n showXAxisLabel ? (\n <VictoryTooltip\n flyoutComponent={\n <AxisTooltip\n dataLength={data.length}\n hiddenData={hiddenData}\n />\n }\n />\n ) : undefined\n }\n role=\"presentation\"\n voronoiPadding={32}\n />\n }\n {...chart}\n >\n <VictoryAxis {...yAxisOther} dependentAxis style={yAxisStyles} />\n {data.map(\n ({ data: dataset }, i) =>\n !hiddenData.includes(i) && (\n <VictoryLine\n style={{\n data: {\n opacity: setLineOpacity(i),\n stroke: theme.iterableColors[i],\n strokeWidth: '3',\n },\n parent: { border: theme.colors.neutral400 },\n }}\n key={`line${i}`}\n data={dataset as unknown as any[]}\n labelComponent={<></>}\n x={x as DataGetterPropType}\n y={y as DataGetterPropType}\n {...line}\n />\n )\n )}\n <VictoryAxis\n {...xAxisOther}\n style={xAxisStyles}\n gridComponent={\n <CustomAxisComponent\n events={{\n onMouseEnter: () => setHoveringOnXAxisLine(true),\n onMouseLeave: () => setHoveringOnXAxisLine(false),\n }}\n />\n }\n />\n {data.map(\n ({ data: dataset }, i) =>\n !hiddenData.includes(i) && (\n <VictoryScatter\n name={`scatter-${i}`}\n events={[\n {\n target: 'data',\n eventHandlers: {\n onBlur: () => {\n setShowXAxisLabel(true);\n setShowTooltip(null);\n return [\n {\n target: 'labels',\n mutation: () => ({ active: undefined }),\n },\n ];\n },\n onClick: () => {\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onFocus: () => {\n setShowXAxisLabel(false);\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onMouseEnter: () => {\n setShowXAxisLabel(false);\n return [\n {\n target: 'labels',\n mutation: props => {\n setShowTooltip(\n `${props.datum.lineIndex}-${props.datum.index}`\n );\n return { active: true };\n },\n },\n ];\n },\n onMouseLeave: () => {\n setShowTooltip(null);\n setShowXAxisLabel(true);\n },\n },\n },\n ]}\n style={{\n data: {\n fill: theme.colors.neutral100,\n opacity: setLineOpacity(i),\n stroke: theme.iterableColors[i],\n strokeWidth: 2,\n },\n }}\n size={5}\n data={\n dataset.map((datum, index) => ({\n index,\n lineIndex: i,\n ...datum,\n })) as unknown as any[]\n }\n dataComponent={\n <CustomScatterDataComponent\n lineIndex={i}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n unregisterPoint={unregisterPoint}\n />\n }\n labels={() => ''}\n labelComponent={\n <VictoryTooltip\n text=\"\"\n flyoutComponent={\n <GraphTooltip index={i} showTooltip={showTooltip} />\n }\n />\n }\n key={`scatter${i}`}\n x={x as DataGetterPropType}\n y={y as DataGetterPropType}\n {...scatter}\n />\n )\n )}\n </VictoryChart>\n </VictoryChartContainer>\n\n <DataLegendsContainer>\n <DataLegendsDescription theme={theme}>\n {i18n.charts.line.dataLegendsLabel}\n </DataLegendsDescription>\n {data.map(({ name }, i) => {\n const legendButtonAriaLabel =\n i18n.charts.line.legendButtonAriaLabel.replace(/\\{name\\}/g, name);\n\n return (\n <LegendButton\n aria-label={legendButtonAriaLabel}\n color={theme.iterableColors[i]}\n dataIndex={i}\n isHidden={hiddenData.includes(i)}\n key={i}\n name={name}\n onClick={handleLegendClick}\n onKeyDown={i === 0 ? handleFirstLegendButtonKeydown : undefined}\n focusCurrentLine={focusCurrentLine}\n ref={i === 0 ? firstLegendButtonRef : undefined}\n resetLineFocus={resetLineFocus}\n />\n );\n })}\n </DataLegendsContainer>\n </LineChartContainer>\n );\n}\n","import * as React from 'react';\nimport { VictoryAxisProps } from 'victory';\n\nimport { Card, Datagrid, Spinner } from 'react-magma-dom';\n\nexport function toCamelCase(str: string) {\n return str\n .toLowerCase()\n .replace(/[^a-z 0-9]/gi, '')\n .replace(/(?:^\\w|[A-Z]|\\b\\w)/g, (ltr, index) =>\n index === 0 ? ltr.toLowerCase() : ltr.toUpperCase()\n )\n .replace(/\\s+/g, '');\n}\n\nexport interface DataTableProps {\n data?: any[];\n xData: {\n keyValue?: string | number | symbol;\n label?: VictoryAxisProps['label'];\n tickFormat?: Partial<VictoryAxisProps['tickFormat']>;\n tickValues?: VictoryAxisProps['tickValues'];\n };\n yData: {\n keyValue?: string | number | symbol;\n tickFormat?: Partial<VictoryAxisProps['tickFormat']>;\n };\n}\n\nexport const ChartDataTable = (props: DataTableProps) => {\n const {\n data = [],\n xData: {\n keyValue: xKeyValue,\n label: xAxisLabel,\n tickFormat: xTickFormat,\n tickValues: xTickValues,\n },\n yData: { keyValue: yKeyValue, tickFormat: yTickFormat },\n } = props;\n const [dataForTable, setDataForTable] = React.useState({\n columns: [],\n rows: [],\n });\n\n React.useEffect(() => {\n setDataForTable(convertData());\n }, [data]);\n\n function convertData() {\n const xField = toCamelCase((xKeyValue || xAxisLabel || 'x') as string);\n const xTickValuesArray = data.reduce((valuesArray, { data: dataset }) => {\n dataset.forEach((datum: any) => {\n const value = datum.x || (xKeyValue && datum[xKeyValue]);\n !valuesArray.includes(value) && valuesArray.push(value);\n });\n\n return valuesArray;\n }, []);\n\n let baseTableData = {\n columns:\n xTickValuesArray.length > 0\n ? [\n {\n field: xField,\n header: xAxisLabel || xKeyValue || 'X',\n isRowHeader: true,\n },\n ]\n : [],\n rows: xTickValuesArray.reduce(\n (agg: any[], tick: number, index: number) => {\n const tickValue =\n xTickValues &&\n typeof tick === 'number' &&\n xTickValues.length === xTickValuesArray.length\n ? xTickFormat && typeof xTickFormat === 'function'\n ? xTickFormat(xTickValues[tick - 1])\n : xTickValues[tick - 1]\n : xTickFormat && Array.isArray(xTickFormat)\n ? xTickFormat[tick - 1]\n : xTickFormat && typeof xTickFormat === 'function'\n ? xTickFormat(tick)\n : tick;\n agg.push({\n [xField]: tickValue,\n id: index,\n });\n\n return agg;\n },\n []\n ),\n };\n\n return data.reduce((tableData, datum) => {\n const { name: header, data: dataset } = datum;\n const field = toCamelCase(header);\n\n tableData.columns.push({\n field,\n header,\n });\n\n dataset.forEach((d: any, i: number) => {\n const yValue =\n d.y || d.y === 0 ? d.y : undefined || (yKeyValue && d[yKeyValue]);\n tableData.rows[i] = {\n ...tableData.rows[i],\n id: baseTableData.rows.length > 0 ? i + 1 : i,\n [field]:\n yTickFormat && typeof yTickFormat === 'function'\n ? yTickFormat(yValue)\n : yValue,\n };\n });\n\n return tableData;\n }, baseTableData);\n }\n\n return (\n <Card>\n {dataForTable.rows.length > 0 ? (\n <Datagrid\n hasPagination={false}\n columns={dataForTable.columns}\n rows={dataForTable.rows}\n />\n ) : (\n <Spinner />\n )}\n </Card>\n );\n};\n","import * as React from 'react';\nimport {\n I18nContext,\n styled,\n ThemeContext,\n useDescendants,\n} from 'react-magma-dom';\nimport { css } from '@emotion/core';\nimport { KeyboardIcon } from 'react-magma-icons';\n\nimport { LineChart, LineChartProps } from './LineChart';\nimport { ChartDataTable } from './ChartDataTable';\nimport {\n Announce,\n ButtonVariant,\n Card,\n IconButton,\n Paragraph,\n TabsContainer,\n Tabs,\n Tab,\n TabPanelsContainer,\n TabPanel,\n Tooltip,\n TypographyVisualStyle,\n} from 'react-magma-dom';\n\ninterface BaseChartProps {\n /**\n * Description of what the line chart data represents placed above the chart\n */\n description?: string;\n /**\n * @internal\n */\n testId?: string;\n /**\n * Title of the line chart\n */\n title: string;\n /**\n * Type of chart - for now just 'line' is accepted\n */\n type: string;\n}\nexport interface ChartProps<T extends any>\n extends BaseChartProps,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\n LineChartProps<T> {}\n\nconst StyledTitle = styled.span`\n color: ${props => props.theme.colors.neutral};\n font-size: ${props => props.theme.typeScale.size04.fontSize};\n font-weight: 600;\n font-family: ${props => props.theme.bodyFont};\n line-height: ${props => props.theme.typeScale.size04.lineHeight};\n margin: 0 0 12px 0;\n`;\n\nconst StyledParagraph = styled(Paragraph)`\n font-size: ${props => props.theme.typeScale.size02.fontSize};\n margin: 0 0 18px 0;\n`;\n\nconst StyledTabsContainer = styled(TabsContainer)`\n width: 800px;\n ul {\n box-shadow: inset 0 -1px 0 ${props => props.theme.colors.neutral300};\n }\n`;\n\nconst StyledTabPanel = styled(TabPanel)`\n padding: 22px 0;\n`;\n\nconst KeyboardInstructionsCard = styled(Card)<{\n isOpen?: boolean;\n maxHeight?: string;\n width?: string;\n}>`\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);\n display: ${props => (props.isOpen ? 'block' : 'none')};\n right: ${props => props.theme.spaceScale.spacing02};\n max-height: ${props =>\n props.maxHeight ? props.maxHeight : props.theme.dropdown.content.maxHeight};\n opacity: ${props => (props.isOpen ? '1' : '0')};\n outline: 0;\n overflow-y: auto;\n padding: ${props => props.theme.spaceScale.spacing05}\n ${props => props.theme.spaceScale.spacing05};\n position: absolute;\n transition: opacity 0.3s;\n white-space: nowrap;\n z-index: 2;\n\n ${props =>\n props.width &&\n css`\n white-space: normal;\n width: ${props.width};\n `}\n`;\n\nfunction BaseChart<T>(props: ChartProps<T>, ref: React.Ref<HTMLDivElement>) {\n const { description, title, testId, type, ...other } = props;\n const keyboardInstructionsRef = React.useRef<HTMLButtonElement>(null);\n const lastFocusedScatterPoint = React.useRef<SVGPathElement>(null);\n const theme = React.useContext(ThemeContext);\n const i18n = React.useContext(I18nContext);\n\n const [pointRefArray, registerPoint, unregisterPoint] = useDescendants();\n\n const [isKeyboardInstructionsOpen, setIsKeyboardInstructionsOpen] =\n React.useState<boolean>(false);\n\n function handleKeyboardInstructionsButtonBlur() {\n setIsKeyboardInstructionsOpen(false);\n }\n\n function handleKeyboardInstructionsButtonClick() {\n setIsKeyboardInstructionsOpen(prevOpen => !prevOpen);\n }\n\n function handleKeyboardInstructionsButtonKeydown(event: { preventDefault?: any; key?: any; shiftKey?: any; }) {\n const { key, shiftKey } = event;\n\n switch (key) {\n case 'Escape': {\n setIsKeyboardInstructionsOpen(false);\n break;\n }\n case 'Tab': {\n if (\n !shiftKey &&\n lastFocusedScatterPoint &&\n lastFocusedScatterPoint.current &&\n pointRefArray.current.find(\n point => point.current === lastFocusedScatterPoint.current\n )\n ) {\n event.preventDefault();\n lastFocusedScatterPoint.current.focus();\n }\n break;\n }\n }\n }\n\n return (\n <div ref={ref}>\n <StyledTitle theme={theme}>{title}</StyledTitle>\n {description && (\n <StyledParagraph\n theme={theme}\n visualStyle={TypographyVisualStyle.bodySmall}\n >\n {description}\n </StyledParagraph>\n )}\n <StyledTabsContainer theme={theme}>\n <Tabs>\n <Tab>{i18n.charts.line.chartTabLabel}</Tab>\n <Tab>{i18n.charts.line.dataTabLabel}</Tab>\n <div\n onBlur={handleKeyboardInstructionsButtonBlur}\n style={{\n display: 'inline-block',\n marginLeft: 'auto',\n }}\n >\n <Tooltip\n content={i18n.charts.line.keyboardInstructionsTooltip}\n ref={keyboardInstructionsRef}\n >\n <IconButton\n aria-controls=\"keyboardInstructions\"\n aria-label={i18n.charts.line.keyboardInstructionsTooltip}\n aria-expanded={Boolean(isKeyboardInstructionsOpen)}\n icon={<KeyboardIcon />}\n onClick={handleKeyboardInstructionsButtonClick}\n onKeyDown={handleKeyboardInstructionsButtonKeydown}\n variant={ButtonVariant.link}\n />\n </Tooltip>\n <Announce>\n <KeyboardInstructionsCard\n id=\"keyboardInstructions\"\n isOpen={isKeyboardInstructionsOpen}\n theme={theme}\n width=\"350px\"\n >\n <Paragraph\n visualStyle={TypographyVisualStyle.headingXSmall}\n style={{ margin: '0 0 16px' }}\n >\n {i18n.charts.line.keyboardInstructionsHeader}\n </Paragraph>\n {i18n.charts.line.keyboardInstructions}\n </KeyboardInstructionsCard>\n </Announce>\n </div>\n </Tabs>\n <TabPanelsContainer>\n <StyledTabPanel theme={theme}>\n {type === 'line' && (\n <LineChart<T>\n {...other}\n lastFocusedScatterPoint={lastFocusedScatterPoint}\n pointRefArray={pointRefArray}\n registerPoint={registerPoint}\n tabRef={keyboardInstructionsRef}\n unregisterPoint={unregisterPoint}\n />\n )}\n </StyledTabPanel>\n <StyledTabPanel theme={theme}>\n <ChartDataTable\n data={other.data}\n xData={{\n keyValue: other.x,\n label: other.componentProps?.xAxis?.label,\n tickFormat: other.componentProps?.xAxis?.tickFormat,\n }}\n yData={{\n keyValue: other.y,\n tickFormat: other.componentProps?.yAxis?.tickFormat,\n }}\n />\n </StyledTabPanel>\n </TabPanelsContainer>\n </StyledTabsContainer>\n </div>\n );\n}\n\nexport const Chart = React.forwardRef(BaseChart) as <T>(\n props: ChartProps<T> & { ref?: React.MutableRefObject<HTMLDivElement> }\n) => ReturnType<typeof BaseChart>;\n"],"names":["width","height","padding","fontFamily","fontSize","letterSpacing","fill","stroke","strokeWidth","textAnchor","baseLabelStyles","area","style","data","labels","baseProps","axis","strokeLinecap","strokeLinejoin","axisLabel","centeredLabelStyles","grid","pointerEvents","ticks","size","tickLabels","polarDependentAxis","bar","boxplot","max","maxLabels","median","medianLabels","min","minLabels","q1","q1Labels","q3","q3Labels","boxWidth","candlestick","candleColors","positive","negative","chart","errorbar","borderWidth","opacity","group","colorScale","colors","histogram","legend","gutter","orientation","titleOrientation","type","title","line","pie","scatter","stack","tooltip","flyoutStyle","flyoutPadding","cornerRadius","pointerLength","voronoi","flyout","styled","StyledTooltip","props","theme","neutral100","neutral300","neutral","typeScale","size02","lineHeight","span","color","datum","index","showTooltip","x","y","React","useContext","ThemeContext","_jsx","_jsxs","StyledGraphTooltip","position","TooltipPosition","top","role","TooltipColorSwatch","iterableColors","label","TooltipArrow","activePoints","hiddenData","Array","from","dataLength","_","i","filter","includes","map","point","pointsIndexes","pointIndex","lineIndex","pointRefArray","registerPoint","unregisterPoint","other","Point","ariaLabel","pathComponent","CustomPointComponent","tabIndex","useForceUpdate","useRef","useEffect","ref","forceUpdate","events","LineSegment","strokeOpacity","forwardRef","children","dataIndex","isHidden","onClick","name","focusCurrentLine","resetLineFocus","display","onMouseEnter","handleOnMouseEnterOrFocus","onMouseLeave","Checkbox","checked","containerStyle","alignItems","border","boxShadow","margin","inputStyle","neutral800","borderRadius","labelText","onBlur","onFocus","div","p","componentProps","_props$componentProps","xAxis","_props$componentProps5","_props$componentProps6","xAxisLabel","undefined","xTickLabels","xRest","xAxisOther","yAxis","_props$componentProps9","_props$componentProps10","yAxisLabel","yTickLabels","yRest","yAxisOther","lastFocusedScatterPoint","tabRef","I18nContext","useState","setHiddenData","setWidth","focusedLine","setFocusedLine","setShowTooltip","showXAxisLabel","setShowXAxisLabel","hoveringOnXAxisLine","setHoveringOnXAxisLine","updateWidth","window","addEventListener","handleEsc","removeEventListener","handleMouseMove","fontWeight","containerRef","current","clientWidth","event","key","item","concat","acc","parseInt","getAttribute","currentLineIndex","push","reduce","buildLineIndexes","currentPointIndex","lineIndexes","lowestLineIndex","highestLineIndex","length","shiftKey","find","preventDefault","focus","LineChartContainer","VictoryChartContainer","onKeyDown","document","activeElement","firstLegendButtonRef","findIndex","focusedPointIndex","focusedPoint","buildLineIndexData","findPointToFocus","indexOf","nextLowestLineIndex","nextHighestLineIndex","VictoryChart","domainPadding","left","right","bottom","magmaTheme","containerComponent","VictoryVoronoiContainer","voronoiBlacklist","scatterNames","voronoiDimension","labelComponent","VictoryTooltip","flyoutComponent","AxisTooltip","voronoiPadding","VictoryAxis","dependentAxis","yAxisStyles","VictoryLine","setLineOpacity","parent","neutral400","dataset","xAxisStyles","gridComponent","CustomAxisComponent","VictoryScatter","target","eventHandlers","mutation","active","dataComponent","CustomScatterDataComponent","text","GraphTooltip","DataLegendsContainer","DataLegendsDescription","i18n","charts","dataLegendsLabel","legendButtonAriaLabel","replace","LegendButton","handleLegendClick","handleFirstLegendButtonKeydown","str","toLowerCase","ltr","toUpperCase","xData","xKeyValue","keyValue","xTickFormat","tickFormat","xTickValues","tickValues","yData","yKeyValue","yTickFormat","columns","rows","dataForTable","setDataForTable","toCamelCase","valuesArray","forEach","value","xTickValuesArray","field","xField","header","isRowHeader","agg","tick","isArray","tickValue","id","tableData","d","baseTableData","yValue","Card","Datagrid","hasPagination","Spinner","size04","bodyFont","Paragraph","TabsContainer","TabPanel","isOpen","spaceScale","spacing02","maxHeight","dropdown","content","spacing05","css","description","useDescendants","isKeyboardInstructionsOpen","setIsKeyboardInstructionsOpen","StyledTitle","StyledParagraph","visualStyle","TypographyVisualStyle","bodySmall","StyledTabsContainer","Tabs","Tab","chartTabLabel","dataTabLabel","marginLeft","Tooltip","keyboardInstructionsTooltip","keyboardInstructionsRef","IconButton","Boolean","icon","KeyboardIcon","prevOpen","variant","ButtonVariant","link","Announce","KeyboardInstructionsCard","headingXSmall","keyboardInstructionsHeader","keyboardInstructions","TabPanelsContainer","StyledTabPanel","LineChart","ChartDataTable","_other$componentProps","_other$componentProps2","_other$componentProps3","_other$componentProps4","_other$componentProps5","_other$componentProps6","BaseChart"],"mappings":"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"}
|
package/dist/charts.modern.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import*as e from"react";import{styled as t,StyledTooltip as n,ThemeContext as r,TooltipPosition as i,TooltipArrow as o,useForceUpdate as a,Checkbox as
|
|
1
|
+
import*as e from"react";import{styled as t,StyledTooltip as n,ThemeContext as r,TooltipPosition as i,TooltipArrow as o,useForceUpdate as a,Checkbox as s,I18nContext as l,Card as c,Datagrid as d,Spinner as u,Paragraph as p,TabsContainer as f,TabPanel as h,useDescendants as m,TypographyVisualStyle as x,Tabs as g,Tab as y,Tooltip as b,IconButton as k,ButtonVariant as v,Announce as w,TabPanelsContainer as F}from"react-magma-dom";import{css as L}from"@emotion/core";import{KeyboardIcon as I}from"react-magma-icons";import{Point as S,LineSegment as A,VictoryChart as $,VictoryVoronoiContainer as P,VictoryTooltip as C,VictoryAxis as E,VictoryLine as z,VictoryScatter as W}from"victory";import{jsx as R,jsxs as D,Fragment as O}from"react/jsx-runtime";function H(){return H=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},H.apply(this,arguments)}function T(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(i[n]=e[n]);return i}const j=["#00507A","#8F0033","#B84900","#255200","#711E6E","#005249"],B={width:350,height:350,padding:50},K={fontFamily:'"Work Sans",Helvetica,sans-serif',fontSize:12,letterSpacing:"normal",padding:8,fill:"#3F3F3F",stroke:"transparent",strokeWidth:0},M=H({textAnchor:"middle"},K),V={area:H({style:{data:{fill:"pink"},labels:K}},B),axis:H({style:{axis:{fill:"transparent",stroke:"#8F8F8F",strokeWidth:1,strokeLinecap:"round",strokeLinejoin:"round"},axisLabel:H({},M,{padding:8,stroke:"transparent"}),grid:{fill:"none",stroke:"#dfdfdf",strokeLinecap:"round",strokeLinejoin:"round",pointerEvents:"painted"},ticks:{fill:"transparent",size:0,stroke:"#8F8F8F",strokeWidth:0,strokeLinecap:"round",strokeLinejoin:"round"},tickLabels:H({},K,{fill:"#3F3F3F"})}},B),polarDependentAxis:{style:{ticks:{fill:"transparent",size:1,stroke:"transparent"}}},bar:H({style:{data:{fill:"#3F3F3F",padding:8,strokeWidth:0},labels:K}},B),boxplot:H({style:{max:{padding:8,stroke:"#3F3F3F",strokeWidth:1},maxLabels:H({},K,{padding:3}),median:{padding:8,stroke:"#3F3F3F",strokeWidth:1},medianLabels:H({},K,{padding:3}),min:{padding:8,stroke:"#3F3F3F",strokeWidth:1},minLabels:H({},K,{padding:3}),q1:{padding:8,fill:"#3F3F3F"},q1Labels:H({},K,{padding:3}),q3:{padding:8,fill:"#3F3F3F"},q3Labels:H({},K,{padding:3})},boxWidth:20},B),candlestick:H({style:{data:{stroke:"#3F3F3F"},labels:H({},K,{padding:5})},candleColors:{positive:"#ffffff",negative:"#3F3F3F"}},B),chart:B,errorbar:H({borderWidth:8,style:{data:{fill:"transparent",opacity:1,stroke:"#3F3F3F",strokeWidth:2},labels:K}},B),group:H({colorScale:j},B),histogram:H({style:{data:{fill:"#3F3F3F",stroke:"pink",strokeWidth:2},labels:K}},B),legend:{colorScale:j,gutter:10,orientation:"vertical",titleOrientation:"top",style:{data:{type:"circle"},labels:K,title:H({},K,{padding:5})}},line:H({style:{data:{fill:"transparent",opacity:1,stroke:"#3F3F3F",strokeWidth:2},labels:K}},B),pie:H({colorScale:j,style:{data:{padding:8,stroke:"#DFDFDF",strokeWidth:1},labels:H({},K,{padding:20})}},B),scatter:H({style:{data:{fill:"#3F3F3F",opacity:1,stroke:"transparent",strokeWidth:0},labels:K}},B),stack:H({colorScale:j},B),tooltip:{style:H({},K,{padding:0,pointerEvents:"none"}),flyoutStyle:{stroke:"pink",strokeWidth:1,fill:"#f0f0f0",pointerEvents:"none"},flyoutPadding:5,cornerRadius:5,pointerLength:10},voronoi:H({style:{data:{fill:"transparent",stroke:"transparent",strokeWidth:0},labels:H({},K,{padding:5,pointerEvents:"none"}),flyout:{stroke:"pink",strokeWidth:1,fill:"#f0f0f0",pointerEvents:"none"}}},B)};let q,U,X=e=>e;const G=t(n)(q||(q=X`
|
|
2
2
|
background: ${0};
|
|
3
3
|
border: 1px solid ${0};
|
|
4
4
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
|
|
@@ -25,7 +25,7 @@ import*as e from"react";import{styled as t,StyledTooltip as n,ThemeContext as r,
|
|
|
25
25
|
height: 20px;
|
|
26
26
|
width: 20px;
|
|
27
27
|
margin-right: 8px;
|
|
28
|
-
`),e=>e.color,e=>e.color?"none":"3px solid black"),J=t=>{const{datum:n,index:a,showTooltip:
|
|
28
|
+
`),e=>e.color,e=>e.color?"none":"3px solid black"),J=t=>{const{datum:n,index:a,showTooltip:s,x:l,y:c}=t,d=e.useContext(r);return s===`${a}-${n.index}`?R("g",{style:{pointerEvents:"none"},children:R("foreignObject",{x:l,y:c,width:"275",height:"100%",children:D(G,{position:i.top,role:"tooltip",theme:d,children:[D("div",{children:[R(Z,{color:d.iterableColors[a]}),R("span",{children:n.label})]}),R(o,{theme:d})]})})}):null},N=t=>{const{x:n,y:a,activePoints:s,hiddenData:l,dataLength:c}=t,d=Array.from(Array(c-0),(e,t)=>t+0).filter(e=>!l.includes(e)),u=e.useContext(r);return R("g",{style:{pointerEvents:"none"},children:R("foreignObject",{x:n,y:a,width:"275",height:"100%",children:D(G,{"data-testid":"axis-tooltip",position:i.top,role:"tooltip",theme:u,children:[s.map((e,t)=>D("div",{children:[R(Z,{color:u.iterableColors[d[t]]}),R("span",{children:e.label})]},t)),R(o,{theme:u})]})})})},Q=["datum","index","lineIndex","pointRefArray","registerPoint","unregisterPoint"],Y=["lineIndex","pointRefArray","pointIndex","registerPoint","unregisterPoint"],_=e=>{const{datum:t,index:n,lineIndex:r,pointRefArray:i,registerPoint:o,unregisterPoint:a}=e,s=T(e,Q);return R(S,H({},s,{ariaLabel:t.label,pathComponent:R(ee,{lineIndex:r,pointIndex:n,pointRefArray:i,registerPoint:o,unregisterPoint:a}),role:"button",tabIndex:0}))},ee=t=>{const{lineIndex:n,pointRefArray:r,pointIndex:i,registerPoint:o,unregisterPoint:s}=t,l=T(t,Y),c=a(),d=e.useRef(null);return e.useEffect(()=>(o(r,d),c(),()=>s(r,d)),[]),R("path",H({ref:d,"data-line-index":n,"data-point-index":i},l))},te=["events"],ne=e=>{let{events:t}=e,n=T(e,te);return D("g",{children:[R(A,H({},n,{events:t,style:{strokeWidth:"50px",stroke:"transparent"}})),R(A,H({},n,{events:t,style:{strokeWidth:"1px",stroke:"black",strokeOpacity:"0.2"}}))]})},re=["children","color","dataIndex","isHidden","onClick","name","focusCurrentLine","resetLineFocus"],ie=e.forwardRef((t,n)=>{const{color:i,dataIndex:o,isHidden:a,onClick:l,name:c,focusCurrentLine:d,resetLineFocus:u}=t,p=T(t,re);function f(){a||d&&"function"==typeof d&&d(o)}const h=e.useContext(r);return R("div",{style:{display:"inline-flex"},onMouseEnter:f,onMouseLeave:u,children:R(s,H({checked:!a,color:i,containerStyle:{alignItems:"center",border:"0",boxShadow:"0 0 0",color:h.colors.neutral,display:"inline-flex",margin:"0 36px 20px 0",padding:"0"},inputStyle:{border:i?"none":`2px solid ${h.colors.neutral800}`,borderRadius:"4px"},labelText:c,onBlur:u,onClick:function(){l&&"function"==typeof l&&l(o),a||u&&"function"==typeof u&&u()},onFocus:f,ref:n,theme:h},p))})}),oe=["axisLabel","tickLabels"],ae=["style"],se=["axisLabel","tickLabels"],le=["style"];let ce,de,ue,pe,fe=e=>e;const he=t.div(ce||(ce=fe`
|
|
29
29
|
max-height: 600px;
|
|
30
30
|
max-width: 800px;
|
|
31
31
|
svg {
|
|
@@ -36,7 +36,7 @@ import*as e from"react";import{styled as t,StyledTooltip as n,ThemeContext as r,
|
|
|
36
36
|
`)),ge=t.p(pe||(pe=fe`
|
|
37
37
|
color: ${0};
|
|
38
38
|
font-size: ${0};
|
|
39
|
-
`),e=>e.theme.colors.neutral,e=>e.theme.typeScale.size02.fontSize);function ye(t){const{componentProps:{chart:n={},line:i={},scatter:o={},xAxis:{style:{axisLabel:a,tickLabels:
|
|
39
|
+
`),e=>e.theme.colors.neutral,e=>e.theme.typeScale.size02.fontSize);function ye(t){const{componentProps:{chart:n={},line:i={},scatter:o={},xAxis:{style:{axisLabel:a,tickLabels:s}={}}={style:{}},yAxis:{style:{axisLabel:c,tickLabels:d}={}}={style:{}}}={},data:u=[],lastFocusedScatterPoint:p,pointRefArray:f,registerPoint:h,unregisterPoint:m,tabRef:x,x:g,y}=t,b=T(t.componentProps.xAxis.style,oe),k=T(t.componentProps.xAxis,ae),v=T(t.componentProps.yAxis.style,se),w=T(t.componentProps.yAxis,le),F=e.useContext(r),L=e.useContext(l),[I,S]=e.useState([]),[A,j]=e.useState(800),[B,K]=e.useState(null),[M,q]=e.useState(null),[U,X]=e.useState(!0),[G,Z]=e.useState(!1),Q=e.useRef(null),Y=e.useRef(null);e.useEffect(()=>(ce(),window.addEventListener("resize",ce),window.addEventListener("keydown",de),()=>{window.removeEventListener("resize",ce),window.removeEventListener("keydown",de)}),[]),e.useEffect(()=>(window.addEventListener("mousemove",ue),()=>{window.removeEventListener("mousemove",ue)}),[M]);const ee=u.map((e,t)=>`scatter-${t}`),te=H({tickLabels:H({color:"#3f3f3f",fontSize:12},s),axisLabel:H({color:"#3f3f3f",padding:44,fontSize:14,fontWeight:"bold"},a)},b),re=H({tickLabels:H({fontSize:12},d),axisLabel:H({color:"#3f3f3f",padding:64,fontSize:14,fontWeight:"bold"},c)},v);function ce(){Q.current&&j(Q.current.clientWidth)}function de(e){"Escape"===e.key&&(q(null),X(!1))}function ue(){!M&&X(!0)}function pe(e){return null===B||B===e?1:.1}function fe(e){I.includes(e)?S(I.filter(t=>t!==e)):S(I.concat([e]))}function ye(e){K(e)}function be(){K(null)}const ke=(e,t)=>{if(t.current){const n=parseInt(t.current.getAttribute("data-line-index"),10);!e.includes(n)&&e.push(parseInt(t.current.getAttribute("data-line-index"),10))}return e},ve=e=>{const t=parseInt(e.current.getAttribute("data-line-index"),10),n=parseInt(e.current.getAttribute("data-point-index"),10),r=f.current.reduce(ke,[]);return{currentLineIndex:t,currentPointIndex:n,lineIndexes:r,lowestLineIndex:r[0],highestLineIndex:r[r.length-1]}},we=(e,t)=>n=>n.current&&parseInt(n.current.getAttribute("data-line-index"),10)===e&&parseInt(n.current.getAttribute("data-point-index"),10)===t;function Fe(e){const{key:t,shiftKey:n}=e;"Tab"===t&&n&&p&&p.current&&f.current.find(e=>e.current===p.current)&&(e.preventDefault(),p.current.focus())}return D(he,{ref:Q,children:[R(me,{onKeyDown:function(e){const{key:t,shiftKey:n}=e;switch(t){case"Tab":e.preventDefault(),p.current=f.current.find(e=>e.current===document.activeElement).current,n?x.current&&x.current.focus():Y.current&&Y.current.focus();break;case"ArrowRight":{const e=f.current.findIndex(e=>e.current===document.activeElement);void 0!==e&&(e===f.current.length-1?f.current[0].current.focus():f.current[e+1].current.focus());break}case"ArrowLeft":{const e=f.current.findIndex(e=>e.current===document.activeElement);void 0!==e&&(0===e?f.current[f.current.length-1].current.focus():f.current[e-1].current.focus());break}case"ArrowUp":{e.preventDefault();const t=f.current.find(e=>e.current===document.activeElement);if(t&&t.current){const{currentLineIndex:e,currentPointIndex:n,lineIndexes:r,lowestLineIndex:i,highestLineIndex:o}=ve(t);if(e===i)f.current.find(we(o,n)).current.focus();else{const t=r[r.indexOf(e)-1];f.current.find(we(t,n)).current.focus()}}break}case"ArrowDown":{e.preventDefault();const t=f.current.find(e=>e.current===document.activeElement);if(t&&t.current){const{currentLineIndex:e,currentPointIndex:n,lineIndexes:r,lowestLineIndex:i,highestLineIndex:o}=ve(t);if(e===o)f.current.find(we(i,n)).current.focus();else{const t=r[r.indexOf(e)+1];f.current.find(we(t,n)).current.focus()}}break}}},children:D($,H({domainPadding:32,height:400,padding:{top:0,left:80,right:0,bottom:62},theme:V,width:A,containerComponent:R(P,{name:"xAxisGroupLabel",voronoiBlacklist:ee,voronoiDimension:"x",labels:G&&U?()=>" ":void 0,labelComponent:U?R(C,{flyoutComponent:R(N,{dataLength:u.length,hiddenData:I})}):void 0,role:"presentation",voronoiPadding:32})},n,{children:[R(E,H({},w,{dependentAxis:!0,style:re})),u.map(({data:e},t)=>!I.includes(t)&&R(z,H({style:{data:{opacity:pe(t),stroke:F.iterableColors[t],strokeWidth:"3"},parent:{border:F.colors.neutral400}},data:e,labelComponent:R(O,{}),x:g,y},i),`line${t}`)),R(E,H({},k,{style:te,gridComponent:R(ne,{events:{onMouseEnter:()=>Z(!0),onMouseLeave:()=>Z(!1)}})})),u.map(({data:e},t)=>!I.includes(t)&&R(W,H({name:`scatter-${t}`,events:[{target:"data",eventHandlers:{onBlur:()=>(X(!0),q(null),[{target:"labels",mutation:()=>({active:void 0})}]),onClick:()=>[{target:"labels",mutation:e=>(q(`${e.datum.lineIndex}-${e.datum.index}`),{active:!0})}],onFocus:()=>(X(!1),[{target:"labels",mutation:e=>(q(`${e.datum.lineIndex}-${e.datum.index}`),{active:!0})}]),onMouseEnter:()=>(X(!1),[{target:"labels",mutation:e=>(q(`${e.datum.lineIndex}-${e.datum.index}`),{active:!0})}]),onMouseLeave:()=>{q(null),X(!0)}}}],style:{data:{fill:F.colors.neutral100,opacity:pe(t),stroke:F.iterableColors[t],strokeWidth:2}},size:5,data:e.map((e,n)=>H({index:n,lineIndex:t},e)),dataComponent:R(_,{lineIndex:t,pointRefArray:f,registerPoint:h,unregisterPoint:m}),labels:()=>"",labelComponent:R(C,{text:"",flyoutComponent:R(J,{index:t,showTooltip:M})}),x:g,y},o),`scatter${t}`))]}))}),D(xe,{children:[R(ge,{theme:F,children:L.charts.line.dataLegendsLabel}),u.map(({name:e},t)=>{const n=L.charts.line.legendButtonAriaLabel.replace(/\{name\}/g,e);return R(ie,{"aria-label":n,color:F.iterableColors[t],dataIndex:t,isHidden:I.includes(t),name:e,onClick:fe,onKeyDown:0===t?Fe:void 0,focusCurrentLine:ye,ref:0===t?Y:void 0,resetLineFocus:be},t)})]})]})}function be(e){return e.toLowerCase().replace(/[^a-z 0-9]/gi,"").replace(/(?:^\w|[A-Z]|\b\w)/g,(e,t)=>0===t?e.toLowerCase():e.toUpperCase()).replace(/\s+/g,"")}const ke=t=>{const{data:n=[],xData:{keyValue:r,label:i,tickFormat:o,tickValues:a},yData:{keyValue:s,tickFormat:l}}=t,[p,f]=e.useState({columns:[],rows:[]});return e.useEffect(()=>{f(function(){const e=be(r||i||"x"),t=n.reduce((e,{data:t})=>(t.forEach(t=>{const n=t.x||r&&t[r];!e.includes(n)&&e.push(n)}),e),[]);let c={columns:t.length>0?[{field:e,header:i||r||"X",isRowHeader:!0}]:[],rows:t.reduce((n,r,i)=>{const s=a&&"number"==typeof r&&a.length===t.length?o&&"function"==typeof o?o(a[r-1]):a[r-1]:o&&Array.isArray(o)?o[r-1]:o&&"function"==typeof o?o(r):r;return n.push({[e]:s,id:i}),n},[])};return n.reduce((e,t)=>{const{name:n,data:r}=t,i=be(n);return e.columns.push({field:i,header:n}),r.forEach((t,n)=>{const r=t.y||0===t.y?t.y:s&&t[s];e.rows[n]=H({},e.rows[n],{id:c.rows.length>0?n+1:n,[i]:l&&"function"==typeof l?l(r):r})}),e},c)}())},[n]),R(c,{children:p.rows.length>0?R(d,{hasPagination:!1,columns:p.columns,rows:p.rows}):R(u,{})})},ve=["description","title","testId","type"];let we,Fe,Le,Ie,Se,Ae,$e=e=>e;const Pe=t.span(we||(we=$e`
|
|
40
40
|
color: ${0};
|
|
41
41
|
font-size: ${0};
|
|
42
42
|
font-weight: 600;
|
|
@@ -72,5 +72,5 @@ import*as e from"react";import{styled as t,StyledTooltip as n,ThemeContext as r,
|
|
|
72
72
|
`),e=>e.isOpen?"block":"none",e=>e.theme.spaceScale.spacing02,e=>e.maxHeight?e.maxHeight:e.theme.dropdown.content.maxHeight,e=>e.isOpen?"1":"0",e=>e.theme.spaceScale.spacing05,e=>e.theme.spaceScale.spacing05,e=>e.width&&L(Ae||(Ae=$e`
|
|
73
73
|
white-space: normal;
|
|
74
74
|
width: ${0};
|
|
75
|
-
`),e.width));function Re(t,n){var i,o,a,
|
|
75
|
+
`),e.width));function Re(t,n){var i,o,a,s,c,d;const{description:u,title:f,type:h}=t,L=T(t,ve),S=e.useRef(null),A=e.useRef(null),$=e.useContext(r),P=e.useContext(l),[C,E,z]=m(),[W,O]=e.useState(!1);return D("div",{ref:n,children:[R(Pe,{theme:$,children:f}),u&&R(Ce,{theme:$,visualStyle:x.bodySmall,children:u}),D(Ee,{theme:$,children:[D(g,{children:[R(y,{children:P.charts.line.chartTabLabel}),R(y,{children:P.charts.line.dataTabLabel}),D("div",{onBlur:function(){O(!1)},style:{display:"inline-block",marginLeft:"auto"},children:[R(b,{content:P.charts.line.keyboardInstructionsTooltip,ref:S,children:R(k,{"aria-controls":"keyboardInstructions","aria-label":P.charts.line.keyboardInstructionsTooltip,"aria-expanded":Boolean(W),icon:R(I,{}),onClick:function(){O(e=>!e)},onKeyDown:function(e){const{key:t,shiftKey:n}=e;switch(t){case"Escape":O(!1);break;case"Tab":!n&&A&&A.current&&C.current.find(e=>e.current===A.current)&&(e.preventDefault(),A.current.focus())}},variant:v.link})}),R(w,{children:D(We,{id:"keyboardInstructions",isOpen:W,theme:$,width:"350px",children:[R(p,{visualStyle:x.headingXSmall,style:{margin:"0 0 16px"},children:P.charts.line.keyboardInstructionsHeader}),P.charts.line.keyboardInstructions]})})]})]}),D(F,{children:[R(ze,{theme:$,children:"line"===h&&R(ye,H({},L,{lastFocusedScatterPoint:A,pointRefArray:C,registerPoint:E,tabRef:S,unregisterPoint:z}))}),R(ze,{theme:$,children:R(ke,{data:L.data,xData:{keyValue:L.x,label:null==(i=L.componentProps)||null==(o=i.xAxis)?void 0:o.label,tickFormat:null==(a=L.componentProps)||null==(s=a.xAxis)?void 0:s.tickFormat},yData:{keyValue:L.y,tickFormat:null==(c=L.componentProps)||null==(d=c.yAxis)?void 0:d.tickFormat}})})]})]})]})}const De=e.forwardRef(Re);export{De as Chart};
|
|
76
76
|
//# sourceMappingURL=charts.modern.js.map
|