https://a.zabedu.ru/static/assets/44c11eeb048c45482fd8.chunk.js

1"use strict";(globalThis.webpackChunksuperset=globalThis.webpackChunksuperset||[]).push([[7788],{37788:(e,t,i)=>{i.d(t,{Ay:()=>W,rE:()=>$});var n,l=i(2445),r=i(24002),a=i(25929),o=i(46942),s=i.n(o),d=i(74098),c=i(50290),m=i(17437),p=i(81115),u=i(43303),h=i(34538),g=i(95018),x=i(27509),b=i(8558),v=i(92026),f=i(3909),z=i(13130);!function(e){e.AllCharts="ALL_CHARTS",e.Featured="FEATURED",e.Category="CATEGORY",e.Tags="TAGS"}(n||(n={}));const $=1090,y=(0,d.t)("Other"),C=(0,d.t)("All charts"),U=(0,d.t)("Featured"),Y=[U,(0,d.t)("ECharts"),(0,d.t)("Advanced-Analytics")],k=c.I4.div`
2  ${({isSelectedVizMetadata:e})=>`\n    display: grid;\n    grid-template-rows: ${e?"auto minmax(100px, 1fr) minmax(200px, 35%)":"auto minmax(100px, 1fr)"};\n    // em is used here because the sidebar should be sized to fit the longest standard tag\n    grid-template-columns: minmax(14em, auto) 5fr;\n    grid-template-areas:\n      'sidebar search'\n      'sidebar main'\n      'details details';\n    height: 70vh;\n    overflow: auto;\n  `}
3`,S=c.I4.h3`
4  margin-top: 0;
5  margin-bottom: ${({theme:e})=>2*e.sizeUnit}px;
6  font-size: ${({theme:e})=>e.fontSizeLG}px;
7  font-weight: ${({theme:e})=>e.fontWeightStrong};
8  line-height: ${({theme:e})=>6*e.sizeUnit}px;
9`,w=c.I4.div`
10  grid-area: sidebar;
11  display: flex;
12  flex-direction: column;
13  border-right: 1px solid ${({theme:e})=>e.colorBorder};
14  overflow: auto;
15
16  .ant-collapse .ant-collapse-item {
17    .ant-collapse-header {
18      font-size: ${({theme:e})=>e.fontSizeSM}px;
19      color: ${({theme:e})=>e.colorText};
20      padding-left: ${({theme:e})=>2*e.sizeUnit}px;
21      padding-bottom: ${({theme:e})=>e.sizeUnit}px;
22    }
23
24    .ant-collapse-content .ant-collapse-content-box {
25      display: flex;
26      flex-direction: column;
27      padding: 0 ${({theme:e})=>2*e.sizeUnit}px;
28    }
29  }
30`,A=c.I4.div`
31  grid-area: main;
32  overflow-y: auto;
33`,F=c.I4.div`
34  ${({theme:e})=>`\n    grid-area: search;\n    margin-top: ${3*e.sizeUnit}px;\n    margin-bottom: ${e.sizeUnit}px;\n    margin-left: ${3*e.sizeUnit}px;\n    margin-right: ${3*e.sizeUnit}px;\n    .ant-input-affix-wrapper {\n      padding-left: ${2*e.sizeUnit}px;\n    }\n  `}
35`,I=c.I4.div`
36  display: flex;
37  justify-content: center;
38  align-items: center;
39  color: ${({theme:e})=>e.colorIcon};
40`,M=c.I4.button`
41  ${({theme:e})=>`\n    all: unset; // remove default button styles\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    cursor: pointer;\n    margin: ${e.sizeUnit}px 0;\n    padding: 0 ${e.sizeUnit}px;\n    border-radius: ${e.borderRadius}px;\n    line-height: 2em;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n    color: ${e.colorText};\n\n    &:focus {\n      outline: initial;\n    }\n\n    &.selected {\n      background-color: ${e.colorPrimary};\n      color: ${e.colorTextLightSolid};\n\n      svg {\n        color: ${e.colorTextLightSolid};\n      }\n\n      &:hover {\n        .cancel {\n          visibility: visible;\n        }\n      }\n    }\n\n    & > span[role="img"] {\n      margin-right: ${2*e.sizeUnit}px;\n    }\n\n    .cancel {\n      visibility: hidden;\n    }\n  `}
42`,T=c.I4.div`
43  overflow: auto;
44  display: grid;
45  grid-template-columns: repeat(
46    auto-fill,
47    ${({theme:e})=>24*e.sizeUnit}px
48  );
49  grid-auto-rows: max-content;
50  justify-content: space-evenly;
51  grid-gap: ${({theme:e})=>2*e.sizeUnit}px;
52  justify-items: center;
53  // for some reason this padding doesn't seem to apply at the bottom of the container. Why is a mystery.
54  padding: ${({theme:e})=>2*e.sizeUnit}px;
55`,E=e=>m.AH`
56  grid-area: details;
57  border-top: 1px solid ${e.colorBorder};
58`,D=e=>m.AH`
59  padding: ${4*e.sizeUnit}px;
60  display: grid;
61  grid-template-columns: 1fr 1fr;
62  grid-template-rows: auto auto 1fr;
63  grid-template-areas:
64    'viz-name examples-header'
65    'viz-tags examples'
66    'description examples';
67`,O=c.I4.div`
68  grid-area: viz-tags;
69  width: ${({theme:e})=>120*e.sizeUnit}px;
70  padding-right: ${({theme:e})=>14*e.sizeUnit}px;
71  padding-bottom: ${({theme:e})=>2*e.sizeUnit}px;
72`,H=c.I4.p`

73  grid-area: description;
74  overflow: auto;
75  padding-right: ${({theme:e})=>14*e.sizeUnit}px;
76  margin: 0;
77`,N=c.I4.div`
78  grid-area: examples;
79  display: flex;
80  flex-direction: row;
81  flex-wrap: nowrap;
82  overflow: auto;
83  gap: ${({theme:e})=>4*e.sizeUnit}px;
84
85  img {
86    height: 100%;
87    border-radius: ${({theme:e})=>e.borderRadius}px;
88    border: 1px solid ${({theme:e})=>e.colorBorder};
89  }
90`,B=e=>m.AH`
91  cursor: pointer;
92  width: ${24*e.sizeUnit}px;
93  position: relative;
94
95  img {
96    min-width: ${24*e.sizeUnit}px;
97    min-height: ${24*e.sizeUnit}px;
98    border: 1px solid ${e.colorBorder};
99    border-radius: ${e.borderRadius}px;
100    transition: border-color ${e.motionDurationMid};
101  }
102
103  &.selected img {
104    border: 2px solid ${e.colorPrimaryBorder};
105  }
106
107  &:hover:not(.selected) img {
108    border: 1px solid ${e.colorBorder};
109  }
110
111  .viztype-label {
112    margin-top: ${2*e.sizeUnit}px;
113    text-align: center;
114  }
115`,R=c.I4.div`
116  ${({theme:e})=>`\n    border: 1px solid ${e.colorPrimaryText};\n    box-sizing: border-box;\n    border-radius: ${e.borderRadius}px;\n    background: ${e.colorBgContainer};\n    line-height: ${2.5*e.sizeUnit}px;\n    color: ${e.colorPrimaryText};\n    font-size: ${e.fontSizeSM}px;\n    font-weight: ${e.fontWeightStrong};\n    text-align: center;\n    padding: ${.5*e.sizeUnit}px ${e.sizeUnit}px;\n    cursor: pointer;\n\n    div {\n      transform: scale(0.83,0.83);\n    }\n  `}
117`,j=c.I4.div`
118  position: absolute;
119  right: ${({theme:e})=>e.sizeUnit}px;
120  top: ${({theme:e})=>19*e.sizeUnit}px;
121`,L=c.I4.div`
122  display: inline-block !important;
123  margin-left: ${({theme:e})=>2*e.sizeUnit}px;
124`,P=({entry:e,selectedViz:t,setSelectedViz:i,onDoubleClick:n})=>{const r=(0,c.DP)(),{key:a,value:o}=e,s=t===e.key;return(0,l.FD)("div",{role:"button",css:B(r),tabIndex:0,className:s?"selected":"",onClick:()=>i(a),onDoubleClick:n,children:[(0,l.Y)("img",{alt:o.name,width:"100%",className:"viztype-selector "+(s?"selected":""),src:o.thumbnail}),(0,l.Y)("div",{className:"viztype-label",children:o.name}),o.label&&(0,l.Y)(j,{children:(0,l.Y)(R,{children:(0,l.Y)("div",{children:(0,d.t)(o.label)})})})]})},V=({vizEntries:e,...t})=>(0,l.Y)(T,{children:e.map((e=>(0,l.Y)(P,{...t,entry:e},e.key)))}),G=({selector:e,sectionId:t,icon:i,isSelected:n,onClick:a,className:o})=>{const d=(0,r.useRef)(null);return(0,r.useEffect)((()=>{n&&queueMicrotask((()=>(0,z.A)(d.current,{behavior:"smooth",scrollMode:"if-needed"})))}),[]),(0,l.FD)(M,{"aria-label":e,"aria-selected":n,ref:d,name:e,className:s()(o,n&&"selected"),onClick:()=>a(e,t),tabIndex:0,role:"tab",children:[i,e]},e)},K=(e,t)=>t===e.category||t===y&&null==e.category||(e.tags||[]).indexOf(t)>-1;function W(e){var t,i;const{selectedViz:o,onChange:s,onDoubleClick:c,className:z,denyList:$}=e,{mountedPluginMetadata:M}=(0,f.Q)(),T=(0,r.useRef)(),[B,j]=(0,r.useState)(""),[P,W]=(0,r.useState)(!0),q=P&&!!B,J=o?M[o]:null,Q=(0,r.useMemo)((()=>Object.entries(M).map((([e,t])=>({key:e,value:t}))).filter((({key:e})=>!$.includes(e))).filter((({value:e})=>(0,v.px)(e.behaviors||[])&&!e.deprecated)).sort(((e,t)=>e.value.name.localeCompare(t.value.name)))),[M,$]),_=(0,r.useMemo)((()=>{const e={};return Q.forEach((t=>{const i=t.value.category||y;e[i]||(e[i]=[]),e[i].push(t)})),e}),[Q]),X=(0,r.useMemo)((()=>Object.keys(_).sort(((e,t)=>e===y?1:t===y?-1:e.localeCompare(t)))),[_]),Z=(0,r.useMemo)((()=>{const e={};return Q.forEach((t=>{(t.value.tags||[]).forEach((i=>{e[i]||(e[i]=[]),e[i].push(t)}))})),e}),[Q]),ee=(0,r.useMemo)((()=>Object.keys(Z).sort(((e,t)=>e.localeCompare(t))).filter((e=>-1===Y.indexOf(e)))),[Z]),te=(0,r.useMemo)((()=>Q.sort(((e,t)=>e.value.name.localeCompare(t.value.name)))),[Q]),[ie,ne]=(0,r.useState)((()=>(null==J?void 0:J.category)||U)),[le,re]=(0,r.useState)((()=>null!=J&&J.category?n.Category:n.Featured)),ae=(0,r.useMemo)((()=>new a.A(Q,{ignoreLocation:!0,threshold:.3,keys:[{name:"value.name",weight:4},{name:"value.tags",weight:2},"value.description"]})),[Q]),oe=(0,r.useMemo)((()=>""===B.trim()?[]:ae.search(B).map((e=>e.item)).sort(((e,t)=>{var i,n;const l=null==(i=e.value)?void 0:i.label,r=null==(n=t.value)?void 0:n.label,a=l&&p.l7[l]?p.l7[l].weight:0;return(r&&p.l7[r]?p.l7[r].weight:0)-a}))),[B,ae]),se=(0,r.useCallback)((()=>{W(!0)}),[]);(0,r.useEffect)((()=>{T.current&&T.current.focus()}),[]);const de=(0,r.useCallback)((e=>j(e.target.value)),[]),ce=(0,r.useCallback)((()=>{W(!1),j(""),T.current.blur()}),[]),me=(0,r.useCallback)(((e,t)=>{P&&ce(),ne(e),re(t);const i=J&&K(J,e);e===ie||i||s(null)}),[ce,P,ie,J,s]),pe=(0,r.useMemo)((()=>({[n.Category]:{title:(0,d.t)("Category"),icon:(0,l.Y)(b.F.Category,{iconSize:"m"}),selectors:X}

124,[n.Tags]:{title:(0,d.t)("Tags"),icon:(0,l.Y)(b.F.NumberOutlined,{iconSize:"m"}),selectors:ee}})),[X,ee]);return(0,l.FD)(k,{className:z,isSelectedVizMetadata:Boolean(J),children:[(0,l.FD)(w,{"aria-label":(0,d.t)("Choose chart type"),role:"tablist",children:[(0,l.Y)(G,{css:({sizeUnit:e})=>m.AH`
125              margin: ${2*e}px;
126              margin-bottom: 0;
127            `,sectionId:n.AllCharts,selector:C,icon:(0,l.Y)(b.F.Ballot,{iconSize:"m"}),isSelected:!q&&C===ie&&n.AllCharts===le,onClick:me}),(0,l.Y)(G,{css:({sizeUnit:e})=>m.AH`
128              margin: ${2*e}px;
129              margin-bottom: 0;
130            `,sectionId:n.Featured,selector:U,icon:(0,l.Y)(b.F.FireOutlined,{iconSize:"m"}),isSelected:!q&&U===ie&&n.Featured===le,onClick:me}),(0,l.Y)(u.S,{expandIconPosition:"end",ghost:!0,defaultActiveKey:n.Category,items:Object.keys(pe).map((e=>{const t=pe[e];return{key:e,label:(0,l.Y)("span",{className:"header",children:t.title}),children:(0,l.Y)(l.FK,{children:t.selectors.map((i=>(0,l.Y)(G,{selector:i,sectionId:e,icon:t.icon,isSelected:!q&&i===ie&&e===le,onClick:me},i)))})}}))})]}),(0,l.Y)(F,{children:(0,l.Y)(h.Input,{type:"text",ref:T,value:B,placeholder:(0,d.t)("Search all charts"),onChange:de,onFocus:se,prefix:(0,l.Y)(I,{children:(0,l.Y)(b.F.SearchOutlined,{iconSize:"m"})}),suffix:(0,l.Y)(I,{children:B&&(0,l.Y)(b.F.CloseOutlined,{iconSize:"m",onClick:ce})})})}),(0,l.Y)(A,{children:(0,l.Y)(V,{vizEntries:q?oe:ie===C&&le===n.AllCharts?te:ie===U&&le===n.Featured&&Z[U]?Z[U]:le===n.Category&&_[ie]?_[ie]:le===n.Tags&&Z[ie]?Z[ie]:[],selectedViz:o,setSelectedViz:s,onDoubleClick:c})}),J?(0,l.Y)("div",{css:e=>[E(e),D(e)],children:(0,l.FD)(l.FK,{children:[(0,l.FD)(S,{css:m.AH`
131                grid-area: viz-name;
132                position: relative;
133              `,children:[null==J?void 0:J.name,(null==J?void 0:J.label)&&(0,l.Y)(g.m,{id:"viz-badge-tooltip",placement:"top",title:null!=(t=J.labelExplanation)?t:p.HE[J.label],children:(0,l.Y)(L,{children:(0,l.Y)(R,{children:(0,l.Y)("div",{children:(0,d.t)(J.label)})})})})]}),(0,l.Y)(O,{children:null==J?void 0:J.tags.map((e=>(0,l.Y)(x.JU,{css:({sizeUnit:e})=>m.AH`
134                    margin-bottom: ${2*e}px;
135                  `,children:e},e)))}),(0,l.Y)(H,{children:(null==J?void 0:J.description)||(0,d.t)("No description available.")}),(0,l.Y)(S,{css:m.AH`
136                grid-area: examples-header;
137              `,children:(0,d.t)("Examples")}),(0,l.Y)(N,{children:(null!=J&&null!=(i=J.exampleGallery)&&i.length?J.exampleGallery:[{url:null==J?void 0:J.thumbnail,caption:null==J?void 0:J.name}]).map((e=>(0,l.Y)("img",{src:e.url,alt:e.caption,title:e.caption},e.url)))})]})}):null]})}}}]);