@xplortech/apollo-data 0.0.6 → 0.0.7
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/apollo-data/apollo-data.esm.js +1 -1
- package/dist/apollo-data/p-4d3f0792.entry.js +1 -0
- package/dist/cjs/{apollo-data-heat-map_4.cjs.entry.js → apollo-data-bar-chart_5.cjs.entry.js} +313 -3
- package/dist/cjs/apollo-data.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/apollo-data-bar/apollo-data-bar.js +3 -3
- package/dist/components/apollo-data-bar-chart.js +1 -1
- package/dist/esm/{apollo-data-heat-map_4.entry.js → apollo-data-bar-chart_5.entry.js} +311 -2
- package/dist/esm/apollo-data.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/package.json +1 -1
- package/dist/apollo-data/p-25841a73.entry.js +0 -1
- package/dist/apollo-data/p-2nuV5Vny.js +0 -1
- package/dist/apollo-data/p-839050b7.entry.js +0 -1
- package/dist/cjs/apollo-data-bar-chart.cjs.entry.js +0 -315
- package/dist/cjs/constants-B3weDEpc.js +0 -5
- package/dist/esm/apollo-data-bar-chart.entry.js +0 -313
- package/dist/esm/constants-2nuV5Vny.js +0 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as a,b as d}from"./p-D64asVrg.js";export{s as setNonce}from"./p-D64asVrg.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const d=import.meta.url,t={};return""!==d&&(t.resourcesUrl=new URL(".",d).href),a(t)})().then((async a=>(await t(),d([["p-
|
|
1
|
+
import{p as a,b as d}from"./p-D64asVrg.js";export{s as setNonce}from"./p-D64asVrg.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const d=import.meta.url,t={};return""!==d&&(t.resourcesUrl=new URL(".",d).href),a(t)})().then((async a=>(await t(),d([["p-4d3f0792",[[513,"apollo-data-bar-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}],[513,"apollo-data-heat-map",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}],[513,"apollo-data-line-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}],[513,"apollo-data-scatter-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}],[513,"apollo-data-world-map-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}]]],["p-e2c3a317",[[513,"apollo-data-donut-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}]]]],a))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,g as a,h as t,H as l}from"./p-D64asVrg.js";import{A as n}from"./p-C2k3WBpi.js";const o=["#4d1ab2","#f99170","#e550c8","#ffd563","#8857fa","#52ebba","#bf1d78","#31cff8"],i="apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",r=class extends n{constructor(a){super(),e(this,a)}get el(){return a(this)}adData=[];adSpec=null;static tooltipStylesInjected=!1;componentDidLoad(){this.injectTooltipStyles()}async componentDidRender(){await this.renderChart()}injectTooltipStyles(){const e=this.constructor;if(e.tooltipStylesInjected)return;const a="apollo-data-bar-tooltip-styles";if(document.getElementById(a))return void(e.tooltipStylesInjected=!0);const t=document.createElement("style");t.id=a,t.textContent="\n #vg-tooltip-element {\n background-color: #ffffff;\n border: 1px solid #e1e2e8;\n border-radius: 0.25rem;\n box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);\n font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;\n font-weight: 500;\n padding: 0.25rem 0.75rem;\n pointer-events: none;\n text-align: center;\n transform: translateY(20%);\n white-space: pre;\n z-index: 999999999;\n }\n\n #vg-tooltip-element table tr td.key {\n color: #6a6d7d;\n text-align: center;\n }\n\n #vg-tooltip-element table tr td.value {\n text-align: center;\n }\n\n #vg-tooltip-element.dark-theme {\n background-color: #292632;\n border: 1px solid #6a6d7d;\n box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);\n color: #ffffff;\n }\n\n #vg-tooltip-element::after {\n border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;\n border-style: solid;\n border-width: 9px;\n bottom: -17px;\n content: '';\n left: 50%;\n position: absolute;\n transform: translateX(-50%);\n }\n ",document.head.appendChild(t),e.tooltipStylesInjected=!0}async getViewData(e,a){const t=this.el?.tagName?.toLowerCase()??"apollo-data-bar-chart";if(!a)throw new Error(`adSpec is required for ${t}`);const{tooltipPrefix:l="",currencySymbol:n=""}=a;if(!e||0===e.length)throw new Error(`Data is required for ${t}`);const r=Array.from(new Set(e.map((e=>e.category)))),s=l?".2f":".0f",d=l?n:"";return{$schema:"https://vega.github.io/schema/vega/v5.json",config:{text:{fill:"#6a6d7d",font:i,labelFontSize:12,labelFontWeight:400},axis:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:i,titleFont:i,titleFontWeight:400},legend:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:i,titleFont:i,labelFontSize:12,labelLimit:95},title:{color:"#6a6d7d",font:i,labelFontSize:12,labelFontWeight:400}},height:250,autosize:{type:"fit-x",contains:"padding",resize:!0},signals:[{name:"containerW",update:"max(containerSize()[0], 400)"},{name:"legendColumns",update:"ceil(containerW / 140)"},{name:"hoveredPeriod",value:null,on:[{events:"rect:mouseover",update:"datum.periodId"},{events:"rect:mouseout",update:"null"}]}],width:{signal:"containerW"},data:[{name:"raw",values:e},{name:"periodTotals",source:"raw",transform:[{type:"aggregate",groupby:["periodId"],fields:["value"],ops:["sum"],as:["total"]}]},{name:"table",source:"raw",transform:[{type:"lookup",from:"periodTotals",key:"periodId",fields:["periodId"],values:["total"],as:["total"]},{type:"stack",groupby:["periodId"],sort:{field:"category"},field:"value"},{type:"formula",as:"periodId",expr:"datum.periodId"},{type:"formula",as:"labelOnly",expr:"datum.label"}]},{name:"periodLabels",source:"raw",transform:[{type:"aggregate",groupby:["periodId","label"]}]}],scales:[{name:"x",type:"band",domain:{data:"table",field:"periodId"},range:"width",paddingInner:.35,paddingOuter:.02},{name:"xLabels",type:"ordinal",domain:{data:"periodLabels",field:"periodId"},range:{data:"periodLabels",field:"label"}},{name:"y",type:"linear",domain:{data:"table",field:"y1"},nice:!0,zero:!0,range:"height"},{name:"color",type:"ordinal",domain:r,range:a?.colorSet??o}],axes:[{orient:"bottom",scale:"x",title:a?.xAxisTitle,labelPadding:12,titlePadding:12,labelAngle:-90,labelAlign:"right",labelBaseline:"middle",tickSize:3,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,encode:{labels:{update:{text:{signal:"scale('xLabels', datum.value)"}}}}},{orient:"left",scale:"y",title:a?.yAxisTitle||"",format:",.0f",grid:!0,tickCount:6,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,tickBand:"extent",labelPadding:10}],legends:[{fill:"color",orient:"bottom",direction:"horizontal",columns:{signal:"legendColumns"},title:null,symbolType:"square",rowPadding:8,symbolOffset:-35,symbolSize:100,labelOffset:8,labelLimit:95}],marks:[{type:"rect",from:{data:"table"},encode:{enter:{x:{scale:"x",field:"periodId"},width:{scale:"x",band:1},y:{scale:"y",field:"y1"},y2:{scale:"y",field:"y0"},fill:{scale:"color",field:"category"},tooltip:{signal:`datum.category + ': ${d}' + format(datum.value, ',${s}') + '\\nTotal: ${d}' + format(datum.total, ',${s}')`}},update:{opacity:[{test:"hoveredPeriod && datum.periodId !== hoveredPeriod",value:.2},{value:1}]}}}]}}render(){return t(l,{key:"fd34c44431e85e36cec86ff19c7142c2deb2e9ff"},t("div",{key:"f3e9c269e4817b0f06233860c67649f1e1d9ec16",id:"container",style:{width:"100%",height:"100%"}}))}},s=class extends n{constructor(a){super(),e(this,a)}get el(){return a(this)}adData=[];adSpec={};async componentDidRender(){await this.renderChart()}DEFAULT_COLOR_RANGE=["#e8f4f8","#0066a1"];async getViewData(e,a){const t=a?.colorRange,l=Array.isArray(t)&&t.length>=2?t:this.DEFAULT_COLOR_RANGE,n="none"!==a?.tooltip,o=e.filter((e=>null!=e&&"string"==typeof e.xLabel&&"string"==typeof e.yLabel&&""!==e.xLabel&&""!==e.yLabel&&"number"==typeof e.value)),i=[...new Set(o.map((e=>e.xLabel)))],r=[...new Set(o.map((e=>e.yLabel)))];return{$schema:"https://vega.github.io/schema/vega/v6.json",description:"A heat map with xLabel and yLabel categories and value encoded as color.",width:450,height:350,padding:{left:5,top:5,bottom:5,right:70},autosize:{type:"fit",resize:!0},data:[{name:"source",values:o}],scales:[{name:"xscale",type:"band",range:[0,{signal:"width"}],domain:i,padding:.05},{name:"yscale",type:"band",range:[{signal:"height"},0],domain:r,padding:.05},{name:"color",type:"sequential",range:l,domain:{data:"source",field:"value"},zero:!0}],axes:[{orient:"bottom",scale:"xscale",title:a?.xAxisTitle??"X",labelAngle:-90,labelAlign:"right"},{orient:"left",scale:"yscale",title:a?.yAxisTitle??"Y"}],legends:[{type:"gradient",fill:"color",orient:"right",direction:"vertical",title:"Value",titleLimit:120,tickCount:5,format:"s"}],marks:[{type:"rect",from:{data:"source"},encode:{...n&&{enter:{tooltip:{signal:"datum.xLabel + ' | ' + datum.yLabel + ' | ' + format(datum.value, ',.2f')"}}},update:{x:{scale:"xscale",field:"xLabel"},y:{scale:"yscale",field:"yLabel"},width:{scale:"xscale",band:1},height:{scale:"yscale",band:1},fill:{scale:"color",field:"value"}},hover:{fill:{value:"firebrick"},opacity:{value:.8}}}}]}}render(){return t(l,{key:"d15b44f268f153498e61dc7829fe0d45f315a992"},t("div",{key:"7783444f4675c885980f1cd571737d506e00fdbc",id:"container",style:{width:"100%",height:"100%"}}))}},d="apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",c=class extends n{constructor(a){super(),e(this,a)}get el(){return a(this)}adData=[];adSpec=null;static tooltipStylesInjected=!1;componentDidLoad(){this.injectTooltipStyles()}async componentDidRender(){await this.renderChart()}injectTooltipStyles(){const e=this.constructor;if(e.tooltipStylesInjected)return;const a="apollo-data-line-tooltip-styles";if(document.getElementById(a))return void(e.tooltipStylesInjected=!0);const t=document.createElement("style");t.id=a,t.textContent="\n #vg-tooltip-element {\n background-color: #ffffff;\n border: 1px solid #e1e2e8;\n border-radius: 0.25rem;\n box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);\n font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;\n font-weight: 500;\n padding: 0.25rem 0.75rem;\n pointer-events: none;\n text-align: center;\n transform: translateY(20%);\n white-space: pre;\n z-index: 999999999;\n }\n\n #vg-tooltip-element table tr td.key {\n color: #6a6d7d;\n text-align: center;\n }\n\n #vg-tooltip-element table tr td.value {\n text-align: center;\n }\n\n #vg-tooltip-element.dark-theme {\n background-color: #292632;\n border: 1px solid #6a6d7d;\n box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);\n color: #ffffff;\n }\n\n #vg-tooltip-element::after {\n border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;\n border-style: solid;\n border-width: 9px;\n bottom: -17px;\n content: '';\n left: 50%;\n position: absolute;\n transform: translateX(-50%);\n }\n ",document.head.appendChild(t),e.tooltipStylesInjected=!0}async getViewData(e,a){const t=this.el?.tagName?.toLowerCase()??"apollo-data-line-chart";if(!a)throw new Error(`adSpec is required for ${t}`);const{tooltipPrefix:l="",currencySymbol:n=""}=a;if(!e||0===e.length)throw new Error(`Data is required for ${t}`);const i=Array.from(new Set(e.map((e=>e.category)))),r=[...new Set(e.map((e=>e.xValue)))].sort(((e,a)=>e-a)),s=a?.colorSet??o,c=r.map((a=>{const t=e.find((e=>e.xValue===a));return{xValue:a,displayLabel:null!=t?.xLabel?t.xLabel:String(a)}})),u=l?".2f":".0f",p=l?n:"",m=a.pointStyle??"circle",f=function(e){switch(e){case"dashed":return[6,4];case"dotted":return[2,2];default:return[]}}(a.lineStyle??"solid"),y=[{name:"raw",values:e},{name:"xLabelData",values:c}];i.forEach(((e,a)=>{y.push({name:`series_${a}`,source:"raw",transform:[{type:"filter",expr:`datum.category === ${JSON.stringify(e)}`},{type:"collect",sort:{field:"xValue"}}]})}));const g=i.map(((e,a)=>({type:"line",from:{data:`series_${a}`},encode:{enter:{x:{scale:"x",field:"xValue"},y:{scale:"y",field:"yValue"},stroke:{value:s[a%s.length]},strokeWidth:{value:2},interpolate:{value:"monotone"},...f.length>0?{strokeDash:{value:f}}:{}}}})));return{$schema:"https://vega.github.io/schema/vega/v5.json",config:{text:{fill:"#6a6d7d",font:d,labelFontSize:12,labelFontWeight:400},axis:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:d,titleFont:d,titleFontWeight:400},legend:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:d,titleFont:d,labelFontSize:12,labelLimit:95},title:{color:"#6a6d7d",font:d,labelFontSize:12,labelFontWeight:400}},height:250,autosize:{type:"fit-x",contains:"padding",resize:!0},signals:[{name:"containerW",update:"max(containerSize()[0], 400)"},{name:"legendColumns",update:"ceil(containerW / 140)"}],width:{signal:"containerW"},data:y,scales:[{name:"x",type:"point",domain:r,range:"width",padding:.5},{name:"xLabels",type:"ordinal",domain:{data:"xLabelData",field:"xValue"},range:{data:"xLabelData",field:"displayLabel"}},{name:"y",type:"linear",domain:{data:"raw",field:"yValue"},nice:!0,zero:!0,range:"height"},{name:"color",type:"ordinal",domain:i,range:a?.colorSet??o}],axes:[{orient:"bottom",scale:"x",title:a?.xAxisTitle,labelPadding:12,titlePadding:12,labelAngle:-90,labelAlign:"right",labelBaseline:"middle",tickSize:3,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,encode:{labels:{update:{text:{signal:"scale('xLabels', datum.value)"}}}}},{orient:"left",scale:"y",title:a?.yAxisTitle||"",format:",.0f",grid:!0,tickCount:6,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,tickBand:"extent",labelPadding:10}],legends:[{stroke:"color",orient:"bottom",direction:"horizontal",columns:{signal:"legendColumns"},title:null,symbolType:"stroke",symbolStrokeWidth:3,rowPadding:8,symbolOffset:-35,symbolSize:100,labelOffset:8,labelLimit:95}],marks:[...g,{type:"symbol",from:{data:"raw"},encode:{enter:{x:{scale:"x",field:"xValue"},y:{scale:"y",field:"yValue"},fill:{scale:"color",field:"category"},size:{value:50},shape:{value:m},tooltip:{signal:`(datum.xLabel != null ? datum.xLabel : format(datum.xValue, ',.0f')) + ' · ' + datum.category + ': ' + (datum.yLabel != null ? datum.yLabel : '${p}' + format(datum.yValue, ',${u}'))`}}}}]}}render(){return t(l,{key:"fd64f4abb624b14a878808b23345910c9b23a72c"},t("div",{key:"aeda5086730862ca1368a0374caf2d918969839d",id:"container",style:{width:"100%",height:"100%"}}))}},u=class extends n{constructor(a){super(),e(this,a)}get el(){return a(this)}adData=[];adSpec={};async componentDidRender(){await this.renderChart()}DEFAULT_POINT_STYLE={shape:"circle",opacity:1,color:"blue",size:1};async getViewData(e,a){const t=e.map((e=>{const t={};return Object.keys(this.DEFAULT_POINT_STYLE).forEach((l=>{t[l]=e.pointStyle?.[l]??e?.[l]??a.categoryPointStyleMap?.[e.category]?.[l]??a.defaultPointStyle?.[l]??this.DEFAULT_POINT_STYLE[l]})),{category:e.category,xValue:e.xValue,yValue:e.yValue,color:t.color,shape:t.shape,opacity:t.opacity}})),l="auto"===a?.tooltip?"category":"none";return{$schema:"https://vega.github.io/schema/vega/v6.json",description:"A scatter plot with null values visualized along the axes.",width:450,height:450,padding:5,autosize:{type:"fit",resize:!0},signals:[{name:"nullSize",value:8},{name:"nullGap",update:"nullSize + 10"}],data:[{name:"source",values:t},{name:"valid",source:"source",transform:[{type:"filter",expr:"datum.xValue != null && datum.yValue != null"}]},{name:"nullXY",source:"source",transform:[{type:"filter",expr:"datum.xValue == null && datum.yValue == null"},{type:"aggregate"}]},{name:"nullY",source:"source",transform:[{type:"filter",expr:"datum.xValue != null && datum.yValue == null"}]},{name:"nullX",source:"source",transform:[{type:"filter",expr:"datum.xValue == null && datum.yValue != null"}]}],scales:[{name:"xscale",type:"linear",range:[{signal:"nullGap"},{signal:"width"}],nice:!0,domain:{data:"valid",field:"xValue"}},{name:"yscale",type:"linear",range:[{signal:"height - nullGap"},0],nice:!0,domain:{data:"valid",field:"yValue"}}],axes:[{orient:"bottom",scale:"xscale",offset:5,format:"s",title:a?.xAxisTitle||"X Value"},{orient:"left",scale:"yscale",offset:5,format:"s",title:a?.yAxisTitle||"Y Value"}],marks:[{type:"symbol",from:{data:"valid"},encode:{enter:{size:{value:50},tooltip:{field:l}},update:{x:{scale:"xscale",field:"xValue"},y:{scale:"yscale",field:"yValue"},fill:{field:"color"},fillOpacity:{field:"opacity"},shape:{field:"shape"},zindex:{value:0}},hover:{fill:{value:"firebrick"},fillOpacity:{value:1},zindex:{value:1}}}},{type:"symbol",from:{data:"nullY"},encode:{enter:{size:{value:50},tooltip:{field:l}},update:{x:{scale:"xscale",field:"xValue"},y:{signal:"height - nullSize/2"},fill:{value:"#aaa"},fillOpacity:{value:.2}},hover:{fill:{value:"firebrick"},fillOpacity:{value:1}}}},{type:"symbol",from:{data:"nullX"},encode:{enter:{size:{value:50},tooltip:{field:"name"}},update:{x:{signal:"nullSize/2"},y:{scale:"yscale",field:"yValue"},fill:{value:"#aaa"},fillOpacity:{value:.2},zindex:{value:0}},hover:{fill:{value:"firebrick"},fillOpacity:{value:1},zindex:{value:1}}}},{type:"text",interactive:!1,from:{data:"nullXY"},encode:{update:{x:{signal:"nullSize",offset:-4},y:{signal:"height",offset:13},text:{signal:"datum.count + ' null'"},align:{value:"right"},baseline:{value:"top"},fill:{value:"#999"},fontSize:{value:9}}}}]}}render(){return t(l,{key:"f6c1e8d9e9a6ba41dbbf8c2c5737895b96b0915d"},t("div",{key:"2aeba82bc31c5995a3d5b532c339f5b45ae850f7",id:"container",style:{width:"100%",height:"100%"}}))}},p=class extends n{constructor(a){super(),e(this,a)}get el(){return a(this)}adData=[];adSpec={};async componentDidRender(){await this.renderChart()}async getViewData(e,a){return{$schema:"https://vega.github.io/schema/vega/v6.json",description:"World map + tooltip + points.",width:600,height:400,autosize:"none",background:"#cfe3f1",signals:[{name:"scale",value:85,on:[{events:{type:"wheel",consume:!0},update:"clamp(scale * pow(1.002, -event.deltaY), 85, 2000)"}]},{name:"xc",value:0,on:[{events:"mousedown",update:"x()"}]},{name:"yc",value:0,on:[{events:"mousedown",update:"y()"}]},{name:"xo",value:300,on:[{events:"mousedown",update:"tx"}]},{name:"yo",value:175,on:[{events:"mousedown",update:"ty"}]},{name:"tx",value:300,on:[{events:"[mousedown, window:mouseup] > window:mousemove",update:"xo - (x() - xc)"}]},{name:"ty",value:270,on:[{events:"[mousedown, window:mouseup] > window:mousemove",update:"clamp(yo + y() - yc, -scale * 0.5, scale * 2.5 + height)"}]}],projections:[{name:"projection",type:"mercator",scale:{signal:"scale"},rotate:[{signal:"-(tx - width / 2) * 180 / (scale * PI)"},0,0],center:[0,0],translate:[{signal:"width / 2"},{signal:"ty"}]}],data:[{name:"names",url:"https://raw.githubusercontent.com/KoGor/Map-Icons-Generator/master/data/world-110m-country-names.tsv",format:{type:"tsv"},transform:[{type:"formula",as:"id",expr:"toNumber(datum.id)"}]},{name:"metrics",values:e},{name:"world",url:"https://vega.github.io/editor/data/world-110m.json",format:{type:"topojson",feature:"countries"},transform:[{type:"lookup",from:"names",key:"id",fields:["id"],values:["name"],as:["name"]},{type:"filter",expr:"datum.name != 'Antarctica'"}]},{name:"points",source:"metrics",transform:[{type:"filter",expr:"isValid(datum.lon) && isValid(datum.lat)"},{type:"geopoint",projection:"projection",fields:["lon","lat"],as:["x","y"]}]},{name:"continentLabels",values:[{name:"North America",lon:-105,lat:45},{name:"South America",lon:-60,lat:-15},{name:"Europe",lon:15,lat:52},{name:"Africa",lon:20,lat:5},{name:"Asia",lon:90,lat:35},{name:"Oceania",lon:135,lat:-25}],transform:[{type:"geopoint",projection:"projection",fields:["lon","lat"],as:["x","y"]}]}],marks:[{type:"shape",from:{data:"world"},transform:[{type:"geoshape",projection:"projection"}],encode:{update:{fill:{value:"#8fbf8f"},stroke:{value:"#6c8c8c"},strokeWidth:{value:.7},tooltip:{signal:"{Country: datum.name ? datum.name : 'Unknown'}"}},hover:{stroke:{value:"#2b3a42"},strokeWidth:{value:1.3}}}},{type:"symbol",from:{data:"points"},encode:{update:{x:{field:"x"},y:{field:"y"},size:{value:80},fill:{value:a?.pinColor||"#d3544b"},stroke:{value:"white"},shape:{value:a?.pinShape||"circle"},strokeWidth:{value:1},tooltip:{signal:"{Label: datum.label, Value: datum.value, Latitude: datum.lat, Longitude: datum.lon}"}}}},{type:"text",from:{data:"continentLabels"},encode:{update:{x:{field:"x"},y:{field:"y"},text:{field:"name"},align:{value:"center"},baseline:{value:"middle"},fontSize:{value:12},fontWeight:{value:"600"},fill:{value:"#2b3a42"},fillOpacity:{value:.5}}}}]}}render(){return t(l,{key:"8053ea3b9706cdd03a430157b3f63e93c1201d1f"},t("div",{key:"514807ae8dd4868d3d74e86c4260b7b9967c0ac2",id:"container",style:{width:"100%",height:"100%"}}))}};export{r as apollo_data_bar_chart,s as apollo_data_heat_map,c as apollo_data_line_chart,u as apollo_data_scatter_chart,p as apollo_data_world_map_chart}
|
package/dist/cjs/{apollo-data-heat-map_4.cjs.entry.js → apollo-data-bar-chart_5.cjs.entry.js}
RENAMED
|
@@ -2,7 +2,316 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-Bd5risOy.js');
|
|
4
4
|
var apolloDataBase = require('./apollo-data-base-COGMOEqL.js');
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
const CHART_COLORS = ['#4d1ab2', '#f99170', '#e550c8', '#ffd563', '#8857fa', '#52ebba', '#bf1d78', '#31cff8'];
|
|
7
|
+
|
|
8
|
+
const FONT_FAMILY$1 = "apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
|
|
9
|
+
const ApolloDataBarChart = class extends apolloDataBase.ApolloBase {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
super();
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
}
|
|
14
|
+
get el() { return index.getElement(this); }
|
|
15
|
+
adData = [];
|
|
16
|
+
adSpec = null;
|
|
17
|
+
static tooltipStylesInjected = false;
|
|
18
|
+
componentDidLoad() {
|
|
19
|
+
this.injectTooltipStyles();
|
|
20
|
+
}
|
|
21
|
+
async componentDidRender() {
|
|
22
|
+
await this.renderChart();
|
|
23
|
+
}
|
|
24
|
+
injectTooltipStyles() {
|
|
25
|
+
const chartClass = this.constructor;
|
|
26
|
+
if (chartClass.tooltipStylesInjected) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
const styleId = 'apollo-data-bar-tooltip-styles';
|
|
30
|
+
if (document.getElementById(styleId)) {
|
|
31
|
+
chartClass.tooltipStylesInjected = true;
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
const style = document.createElement('style');
|
|
35
|
+
style.id = styleId;
|
|
36
|
+
style.textContent = `
|
|
37
|
+
#vg-tooltip-element {
|
|
38
|
+
background-color: #ffffff;
|
|
39
|
+
border: 1px solid #e1e2e8;
|
|
40
|
+
border-radius: 0.25rem;
|
|
41
|
+
box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);
|
|
42
|
+
font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
padding: 0.25rem 0.75rem;
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
text-align: center;
|
|
47
|
+
transform: translateY(20%);
|
|
48
|
+
white-space: pre;
|
|
49
|
+
z-index: 999999999;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
#vg-tooltip-element table tr td.key {
|
|
53
|
+
color: #6a6d7d;
|
|
54
|
+
text-align: center;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
#vg-tooltip-element table tr td.value {
|
|
58
|
+
text-align: center;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#vg-tooltip-element.dark-theme {
|
|
62
|
+
background-color: #292632;
|
|
63
|
+
border: 1px solid #6a6d7d;
|
|
64
|
+
box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);
|
|
65
|
+
color: #ffffff;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
#vg-tooltip-element::after {
|
|
69
|
+
border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
|
|
70
|
+
border-style: solid;
|
|
71
|
+
border-width: 9px;
|
|
72
|
+
bottom: -17px;
|
|
73
|
+
content: '';
|
|
74
|
+
left: 50%;
|
|
75
|
+
position: absolute;
|
|
76
|
+
transform: translateX(-50%);
|
|
77
|
+
}
|
|
78
|
+
`;
|
|
79
|
+
document.head.appendChild(style);
|
|
80
|
+
chartClass.tooltipStylesInjected = true;
|
|
81
|
+
}
|
|
82
|
+
async getViewData(data, spec) {
|
|
83
|
+
const componentTag = this.el?.tagName?.toLowerCase() ?? 'apollo-data-bar-chart';
|
|
84
|
+
if (!spec) {
|
|
85
|
+
throw new Error(`adSpec is required for ${componentTag}`);
|
|
86
|
+
}
|
|
87
|
+
const { tooltipPrefix = '', currencySymbol = '' } = spec;
|
|
88
|
+
if (!data || data.length === 0) {
|
|
89
|
+
throw new Error(`Data is required for ${componentTag}`);
|
|
90
|
+
}
|
|
91
|
+
const uniqueCategories = Array.from(new Set(data.map(item => item.category)));
|
|
92
|
+
const formatNumber = tooltipPrefix ? '.2f' : '.0f';
|
|
93
|
+
const currencyPrefix = tooltipPrefix ? currencySymbol : '';
|
|
94
|
+
return {
|
|
95
|
+
$schema: 'https://vega.github.io/schema/vega/v5.json',
|
|
96
|
+
config: {
|
|
97
|
+
text: {
|
|
98
|
+
fill: '#6a6d7d',
|
|
99
|
+
font: FONT_FAMILY$1,
|
|
100
|
+
labelFontSize: 12,
|
|
101
|
+
labelFontWeight: 400,
|
|
102
|
+
},
|
|
103
|
+
axis: {
|
|
104
|
+
labelColor: '#6a6d7d',
|
|
105
|
+
titleColor: '#6a6d7d',
|
|
106
|
+
labelFont: FONT_FAMILY$1,
|
|
107
|
+
titleFont: FONT_FAMILY$1,
|
|
108
|
+
titleFontWeight: 400,
|
|
109
|
+
},
|
|
110
|
+
legend: {
|
|
111
|
+
labelColor: '#6a6d7d',
|
|
112
|
+
titleColor: '#6a6d7d',
|
|
113
|
+
labelFont: FONT_FAMILY$1,
|
|
114
|
+
titleFont: FONT_FAMILY$1,
|
|
115
|
+
labelFontSize: 12,
|
|
116
|
+
labelLimit: 95,
|
|
117
|
+
},
|
|
118
|
+
title: {
|
|
119
|
+
color: '#6a6d7d',
|
|
120
|
+
font: FONT_FAMILY$1,
|
|
121
|
+
labelFontSize: 12,
|
|
122
|
+
labelFontWeight: 400,
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
height: 250,
|
|
126
|
+
autosize: { type: 'fit-x', contains: 'padding', resize: true },
|
|
127
|
+
signals: [
|
|
128
|
+
{
|
|
129
|
+
name: 'containerW',
|
|
130
|
+
update: 'max(containerSize()[0], 400)',
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
name: 'legendColumns',
|
|
134
|
+
update: 'ceil(containerW / 140)',
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
name: 'hoveredPeriod',
|
|
138
|
+
value: null,
|
|
139
|
+
on: [
|
|
140
|
+
{ events: 'rect:mouseover', update: 'datum.periodId' },
|
|
141
|
+
{ events: 'rect:mouseout', update: 'null' },
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
width: { signal: 'containerW' },
|
|
146
|
+
data: [
|
|
147
|
+
{
|
|
148
|
+
name: 'raw',
|
|
149
|
+
values: data,
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
name: 'periodTotals',
|
|
153
|
+
source: 'raw',
|
|
154
|
+
transform: [
|
|
155
|
+
{
|
|
156
|
+
type: 'aggregate',
|
|
157
|
+
groupby: ['periodId'],
|
|
158
|
+
fields: ['value'],
|
|
159
|
+
ops: ['sum'],
|
|
160
|
+
as: ['total'],
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
name: 'table',
|
|
166
|
+
source: 'raw',
|
|
167
|
+
transform: [
|
|
168
|
+
{
|
|
169
|
+
type: 'lookup',
|
|
170
|
+
from: 'periodTotals',
|
|
171
|
+
key: 'periodId',
|
|
172
|
+
fields: ['periodId'],
|
|
173
|
+
values: ['total'],
|
|
174
|
+
as: ['total'],
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
type: 'stack',
|
|
178
|
+
groupby: ['periodId'],
|
|
179
|
+
sort: { field: 'category' },
|
|
180
|
+
field: 'value',
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
type: 'formula',
|
|
184
|
+
as: 'periodId',
|
|
185
|
+
expr: 'datum.periodId',
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
type: 'formula',
|
|
189
|
+
as: 'labelOnly',
|
|
190
|
+
expr: 'datum.label',
|
|
191
|
+
},
|
|
192
|
+
],
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
name: 'periodLabels',
|
|
196
|
+
source: 'raw',
|
|
197
|
+
transform: [
|
|
198
|
+
{
|
|
199
|
+
type: 'aggregate',
|
|
200
|
+
groupby: ['periodId', 'label'],
|
|
201
|
+
},
|
|
202
|
+
],
|
|
203
|
+
},
|
|
204
|
+
],
|
|
205
|
+
scales: [
|
|
206
|
+
{
|
|
207
|
+
name: 'x',
|
|
208
|
+
type: 'band',
|
|
209
|
+
domain: { data: 'table', field: 'periodId' },
|
|
210
|
+
range: 'width',
|
|
211
|
+
paddingInner: 0.35,
|
|
212
|
+
paddingOuter: 0.02,
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
name: 'xLabels',
|
|
216
|
+
type: 'ordinal',
|
|
217
|
+
domain: { data: 'periodLabels', field: 'periodId' },
|
|
218
|
+
range: { data: 'periodLabels', field: 'label' },
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
name: 'y',
|
|
222
|
+
type: 'linear',
|
|
223
|
+
domain: { data: 'table', field: 'y1' },
|
|
224
|
+
nice: true,
|
|
225
|
+
zero: true,
|
|
226
|
+
range: 'height',
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
name: 'color',
|
|
230
|
+
type: 'ordinal',
|
|
231
|
+
domain: uniqueCategories,
|
|
232
|
+
range: spec?.colorSet ?? CHART_COLORS,
|
|
233
|
+
},
|
|
234
|
+
],
|
|
235
|
+
axes: [
|
|
236
|
+
{
|
|
237
|
+
orient: 'bottom',
|
|
238
|
+
scale: 'x',
|
|
239
|
+
title: spec?.xAxisTitle,
|
|
240
|
+
labelPadding: 12,
|
|
241
|
+
titlePadding: 12,
|
|
242
|
+
labelAngle: -90,
|
|
243
|
+
labelAlign: 'right',
|
|
244
|
+
labelBaseline: 'middle',
|
|
245
|
+
tickSize: 3,
|
|
246
|
+
labelFontSize: 12,
|
|
247
|
+
titleFontSize: 14,
|
|
248
|
+
ticks: false,
|
|
249
|
+
domain: false,
|
|
250
|
+
encode: {
|
|
251
|
+
labels: {
|
|
252
|
+
update: {
|
|
253
|
+
text: { signal: "scale('xLabels', datum.value)" },
|
|
254
|
+
},
|
|
255
|
+
},
|
|
256
|
+
},
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
orient: 'left',
|
|
260
|
+
scale: 'y',
|
|
261
|
+
title: spec?.yAxisTitle || '',
|
|
262
|
+
format: ',.0f',
|
|
263
|
+
grid: true,
|
|
264
|
+
tickCount: 6,
|
|
265
|
+
labelFontSize: 12,
|
|
266
|
+
titleFontSize: 14,
|
|
267
|
+
ticks: false,
|
|
268
|
+
domain: false,
|
|
269
|
+
tickBand: 'extent',
|
|
270
|
+
labelPadding: 10,
|
|
271
|
+
},
|
|
272
|
+
],
|
|
273
|
+
legends: [
|
|
274
|
+
{
|
|
275
|
+
fill: 'color',
|
|
276
|
+
orient: 'bottom',
|
|
277
|
+
direction: 'horizontal',
|
|
278
|
+
columns: { signal: 'legendColumns' },
|
|
279
|
+
title: null,
|
|
280
|
+
symbolType: 'square',
|
|
281
|
+
rowPadding: 8,
|
|
282
|
+
symbolOffset: -35,
|
|
283
|
+
symbolSize: 100,
|
|
284
|
+
labelOffset: 8,
|
|
285
|
+
labelLimit: 95,
|
|
286
|
+
},
|
|
287
|
+
],
|
|
288
|
+
marks: [
|
|
289
|
+
{
|
|
290
|
+
type: 'rect',
|
|
291
|
+
from: { data: 'table' },
|
|
292
|
+
encode: {
|
|
293
|
+
enter: {
|
|
294
|
+
x: { scale: 'x', field: 'periodId' },
|
|
295
|
+
width: { scale: 'x', band: 1 },
|
|
296
|
+
y: { scale: 'y', field: 'y1' },
|
|
297
|
+
y2: { scale: 'y', field: 'y0' },
|
|
298
|
+
fill: { scale: 'color', field: 'category' },
|
|
299
|
+
tooltip: {
|
|
300
|
+
signal: `datum.category + ': ${currencyPrefix}' + format(datum.value, ',${formatNumber}') + '\\nTotal: ${currencyPrefix}' + format(datum.total, ',${formatNumber}')`,
|
|
301
|
+
},
|
|
302
|
+
},
|
|
303
|
+
update: {
|
|
304
|
+
opacity: [{ test: 'hoveredPeriod && datum.periodId !== hoveredPeriod', value: 0.2 }, { value: 1 }],
|
|
305
|
+
},
|
|
306
|
+
},
|
|
307
|
+
},
|
|
308
|
+
],
|
|
309
|
+
};
|
|
310
|
+
}
|
|
311
|
+
render() {
|
|
312
|
+
return (index.h(index.Host, { key: 'fd34c44431e85e36cec86ff19c7142c2deb2e9ff' }, index.h("div", { key: 'f3e9c269e4817b0f06233860c67649f1e1d9ec16', id: "container", style: { width: '100%', height: '100%' } })));
|
|
313
|
+
}
|
|
314
|
+
};
|
|
6
315
|
|
|
7
316
|
const ApolloDataHeatMap = class extends apolloDataBase.ApolloBase {
|
|
8
317
|
constructor(hostRef) {
|
|
@@ -229,7 +538,7 @@ const ApolloDataLineChart = class extends apolloDataBase.ApolloBase {
|
|
|
229
538
|
}
|
|
230
539
|
const uniqueCategories = Array.from(new Set(data.map(item => item.category)));
|
|
231
540
|
const uniqueXValues = [...new Set(data.map(item => item.xValue))].sort((a, b) => a - b);
|
|
232
|
-
const colorSet = spec?.colorSet ??
|
|
541
|
+
const colorSet = spec?.colorSet ?? CHART_COLORS;
|
|
233
542
|
const xLabelData = uniqueXValues.map(x => {
|
|
234
543
|
const first = data.find(d => d.xValue === x);
|
|
235
544
|
return { xValue: x, displayLabel: first?.xLabel != null ? first.xLabel : String(x) };
|
|
@@ -337,7 +646,7 @@ const ApolloDataLineChart = class extends apolloDataBase.ApolloBase {
|
|
|
337
646
|
name: 'color',
|
|
338
647
|
type: 'ordinal',
|
|
339
648
|
domain: uniqueCategories,
|
|
340
|
-
range: spec?.colorSet ??
|
|
649
|
+
range: spec?.colorSet ?? CHART_COLORS,
|
|
341
650
|
},
|
|
342
651
|
],
|
|
343
652
|
axes: [
|
|
@@ -877,6 +1186,7 @@ const ApolloDataWorldMapChart = class extends apolloDataBase.ApolloBase {
|
|
|
877
1186
|
}
|
|
878
1187
|
};
|
|
879
1188
|
|
|
1189
|
+
exports.apollo_data_bar_chart = ApolloDataBarChart;
|
|
880
1190
|
exports.apollo_data_heat_map = ApolloDataHeatMap;
|
|
881
1191
|
exports.apollo_data_line_chart = ApolloDataLineChart;
|
|
882
1192
|
exports.apollo_data_scatter_chart = ApolloDataScatterChart;
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["apollo-data-
|
|
22
|
+
return index.bootstrapLazy([["apollo-data-bar-chart_5.cjs",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-heat-map",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-line-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-scatter-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-world-map-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]],["apollo-data-donut-chart.cjs",[[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
|
|
|
6
6
|
const defineCustomElements = async (win, options) => {
|
|
7
7
|
if (typeof window === 'undefined') return undefined;
|
|
8
8
|
await appGlobals.globalScripts();
|
|
9
|
-
return index.bootstrapLazy([["apollo-data-
|
|
9
|
+
return index.bootstrapLazy([["apollo-data-bar-chart_5.cjs",[[513,"apollo-data-bar-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-heat-map",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-line-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-scatter-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}],[513,"apollo-data-world-map-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]],["apollo-data-donut-chart.cjs",[[513,"apollo-data-donut-chart",{"adData":[1,"ad-data"],"adSpec":[1,"ad-spec"]}]]]], options);
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
exports.setNonce = index.setNonce;
|
|
@@ -132,7 +132,7 @@ export class ApolloDataBarChart extends ApolloBase {
|
|
|
132
132
|
name: 'hoveredPeriod',
|
|
133
133
|
value: null,
|
|
134
134
|
on: [
|
|
135
|
-
{ events: 'rect:mouseover', update: 'datum.
|
|
135
|
+
{ events: 'rect:mouseover', update: 'datum.periodId' },
|
|
136
136
|
{ events: 'rect:mouseout', update: 'null' },
|
|
137
137
|
],
|
|
138
138
|
},
|
|
@@ -296,7 +296,7 @@ export class ApolloDataBarChart extends ApolloBase {
|
|
|
296
296
|
},
|
|
297
297
|
},
|
|
298
298
|
update: {
|
|
299
|
-
opacity: [{ test: 'hoveredPeriod && datum.
|
|
299
|
+
opacity: [{ test: 'hoveredPeriod && datum.periodId !== hoveredPeriod', value: 0.2 }, { value: 1 }],
|
|
300
300
|
},
|
|
301
301
|
},
|
|
302
302
|
},
|
|
@@ -304,7 +304,7 @@ export class ApolloDataBarChart extends ApolloBase {
|
|
|
304
304
|
};
|
|
305
305
|
}
|
|
306
306
|
render() {
|
|
307
|
-
return (h(Host, { key: '
|
|
307
|
+
return (h(Host, { key: 'fd34c44431e85e36cec86ff19c7142c2deb2e9ff' }, h("div", { key: 'f3e9c269e4817b0f06233860c67649f1e1d9ec16', id: "container", style: { width: '100%', height: '100%' } })));
|
|
308
308
|
}
|
|
309
309
|
static get is() { return "apollo-data-bar-chart"; }
|
|
310
310
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,t,h as a,H as o}from"./p-gcjU8DVr.js";import{A as n}from"./p-CfbMSXKd.js";import{C as l}from"./p-2nuV5Vny.js";const r="apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",i=e(class extends n{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow()}get el(){return this}adData=[];adSpec=null;static tooltipStylesInjected=!1;componentDidLoad(){this.injectTooltipStyles()}async componentDidRender(){await this.renderChart()}injectTooltipStyles(){const e=this.constructor;if(e.tooltipStylesInjected)return;const t="apollo-data-bar-tooltip-styles";if(document.getElementById(t))return void(e.tooltipStylesInjected=!0);const a=document.createElement("style");a.id=t,a.textContent="\n #vg-tooltip-element {\n background-color: #ffffff;\n border: 1px solid #e1e2e8;\n border-radius: 0.25rem;\n box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);\n font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;\n font-weight: 500;\n padding: 0.25rem 0.75rem;\n pointer-events: none;\n text-align: center;\n transform: translateY(20%);\n white-space: pre;\n z-index: 999999999;\n }\n\n #vg-tooltip-element table tr td.key {\n color: #6a6d7d;\n text-align: center;\n }\n\n #vg-tooltip-element table tr td.value {\n text-align: center;\n }\n\n #vg-tooltip-element.dark-theme {\n background-color: #292632;\n border: 1px solid #6a6d7d;\n box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);\n color: #ffffff;\n }\n\n #vg-tooltip-element::after {\n border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;\n border-style: solid;\n border-width: 9px;\n bottom: -17px;\n content: '';\n left: 50%;\n position: absolute;\n transform: translateX(-50%);\n }\n ",document.head.appendChild(a),e.tooltipStylesInjected=!0}async getViewData(e,t){const a=this.el?.tagName?.toLowerCase()??"apollo-data-bar-chart";if(!t)throw Error("adSpec is required for "+a);const{tooltipPrefix:o="",currencySymbol:n=""}=t;if(!e||0===e.length)throw Error("Data is required for "+a);const i=Array.from(new Set(e.map((e=>e.category)))),d=o?".2f":".0f",s=o?n:"";return{$schema:"https://vega.github.io/schema/vega/v5.json",config:{text:{fill:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400},axis:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,titleFontWeight:400},legend:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,labelFontSize:12,labelLimit:95},title:{color:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400}},height:250,autosize:{type:"fit-x",contains:"padding",resize:!0},signals:[{name:"containerW",update:"max(containerSize()[0], 400)"},{name:"legendColumns",update:"ceil(containerW / 140)"},{name:"hoveredPeriod",value:null,on:[{events:"rect:mouseover",update:"datum.
|
|
1
|
+
import{p as e,t,h as a,H as o}from"./p-gcjU8DVr.js";import{A as n}from"./p-CfbMSXKd.js";import{C as l}from"./p-2nuV5Vny.js";const r="apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",i=e(class extends n{constructor(e){super(!1),!1!==e&&this.__registerHost(),this.__attachShadow()}get el(){return this}adData=[];adSpec=null;static tooltipStylesInjected=!1;componentDidLoad(){this.injectTooltipStyles()}async componentDidRender(){await this.renderChart()}injectTooltipStyles(){const e=this.constructor;if(e.tooltipStylesInjected)return;const t="apollo-data-bar-tooltip-styles";if(document.getElementById(t))return void(e.tooltipStylesInjected=!0);const a=document.createElement("style");a.id=t,a.textContent="\n #vg-tooltip-element {\n background-color: #ffffff;\n border: 1px solid #e1e2e8;\n border-radius: 0.25rem;\n box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.05);\n font-family: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;\n font-weight: 500;\n padding: 0.25rem 0.75rem;\n pointer-events: none;\n text-align: center;\n transform: translateY(20%);\n white-space: pre;\n z-index: 999999999;\n }\n\n #vg-tooltip-element table tr td.key {\n color: #6a6d7d;\n text-align: center;\n }\n\n #vg-tooltip-element table tr td.value {\n text-align: center;\n }\n\n #vg-tooltip-element.dark-theme {\n background-color: #292632;\n border: 1px solid #6a6d7d;\n box-shadow: 0 4px 6px -1px rgba(48, 45, 59, 0.1), 0 2px 4px -1px rgba(48, 45, 59, 0.5);\n color: #ffffff;\n }\n\n #vg-tooltip-element::after {\n border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;\n border-style: solid;\n border-width: 9px;\n bottom: -17px;\n content: '';\n left: 50%;\n position: absolute;\n transform: translateX(-50%);\n }\n ",document.head.appendChild(a),e.tooltipStylesInjected=!0}async getViewData(e,t){const a=this.el?.tagName?.toLowerCase()??"apollo-data-bar-chart";if(!t)throw Error("adSpec is required for "+a);const{tooltipPrefix:o="",currencySymbol:n=""}=t;if(!e||0===e.length)throw Error("Data is required for "+a);const i=Array.from(new Set(e.map((e=>e.category)))),d=o?".2f":".0f",s=o?n:"";return{$schema:"https://vega.github.io/schema/vega/v5.json",config:{text:{fill:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400},axis:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,titleFontWeight:400},legend:{labelColor:"#6a6d7d",titleColor:"#6a6d7d",labelFont:r,titleFont:r,labelFontSize:12,labelLimit:95},title:{color:"#6a6d7d",font:r,labelFontSize:12,labelFontWeight:400}},height:250,autosize:{type:"fit-x",contains:"padding",resize:!0},signals:[{name:"containerW",update:"max(containerSize()[0], 400)"},{name:"legendColumns",update:"ceil(containerW / 140)"},{name:"hoveredPeriod",value:null,on:[{events:"rect:mouseover",update:"datum.periodId"},{events:"rect:mouseout",update:"null"}]}],width:{signal:"containerW"},data:[{name:"raw",values:e},{name:"periodTotals",source:"raw",transform:[{type:"aggregate",groupby:["periodId"],fields:["value"],ops:["sum"],as:["total"]}]},{name:"table",source:"raw",transform:[{type:"lookup",from:"periodTotals",key:"periodId",fields:["periodId"],values:["total"],as:["total"]},{type:"stack",groupby:["periodId"],sort:{field:"category"},field:"value"},{type:"formula",as:"periodId",expr:"datum.periodId"},{type:"formula",as:"labelOnly",expr:"datum.label"}]},{name:"periodLabels",source:"raw",transform:[{type:"aggregate",groupby:["periodId","label"]}]}],scales:[{name:"x",type:"band",domain:{data:"table",field:"periodId"},range:"width",paddingInner:.35,paddingOuter:.02},{name:"xLabels",type:"ordinal",domain:{data:"periodLabels",field:"periodId"},range:{data:"periodLabels",field:"label"}},{name:"y",type:"linear",domain:{data:"table",field:"y1"},nice:!0,zero:!0,range:"height"},{name:"color",type:"ordinal",domain:i,range:t?.colorSet??l}],axes:[{orient:"bottom",scale:"x",title:t?.xAxisTitle,labelPadding:12,titlePadding:12,labelAngle:-90,labelAlign:"right",labelBaseline:"middle",tickSize:3,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,encode:{labels:{update:{text:{signal:"scale('xLabels', datum.value)"}}}}},{orient:"left",scale:"y",title:t?.yAxisTitle||"",format:",.0f",grid:!0,tickCount:6,labelFontSize:12,titleFontSize:14,ticks:!1,domain:!1,tickBand:"extent",labelPadding:10}],legends:[{fill:"color",orient:"bottom",direction:"horizontal",columns:{signal:"legendColumns"},title:null,symbolType:"square",rowPadding:8,symbolOffset:-35,symbolSize:100,labelOffset:8,labelLimit:95}],marks:[{type:"rect",from:{data:"table"},encode:{enter:{x:{scale:"x",field:"periodId"},width:{scale:"x",band:1},y:{scale:"y",field:"y1"},y2:{scale:"y",field:"y0"},fill:{scale:"color",field:"category"},tooltip:{signal:`datum.category + ': ${s}' + format(datum.value, ',${d}') + '\\nTotal: ${s}' + format(datum.total, ',${d}')`}},update:{opacity:[{test:"hoveredPeriod && datum.periodId !== hoveredPeriod",value:.2},{value:1}]}}}]}}render(){return a(o,{key:"fd34c44431e85e36cec86ff19c7142c2deb2e9ff"},a("div",{key:"f3e9c269e4817b0f06233860c67649f1e1d9ec16",id:"container",style:{width:"100%",height:"100%"}}))}},[513,"apollo-data-bar-chart",{adData:[1,"ad-data"],adSpec:[1,"ad-spec"]}]),d=i,s=function(){"undefined"!=typeof customElements&&["apollo-data-bar-chart"].forEach((e=>{"apollo-data-bar-chart"===e&&(customElements.get(t(e))||customElements.define(t(e),i))}))};export{d as ApolloDataBarChart,s as defineCustomElement}
|