"use strict";(globalThis.webpackChunksuperset=globalThis.webpackChunksuperset||[]).push([[4109],{76499:(t,e,n)=>{n.r(e),n.d(e,{ChartCreation:()=>S,default:()=>V});var i=n(67294),a=n(15926),s=n.n(a),o=n(17563),r=n(93185),l=n(51995),d=n(55867),c=n(37731),p=n(31069),h=n(23525),g=n(27600),u=n(73727),b=n(16550),m=n(35932),x=n(4715),y=n(58593),f=n(14114),$=n(91877),v=n(13284),w=n(12617),Z=n(20292),D=n(11965);const z=(0,Z.Z)().common.conf.VIZ_TYPE_DENYLIST||[];(0,$.c)(r.T.DASHBOARD_NATIVE_FILTERS)&&!("filter_box"in z)&&z.push("filter_box");const T=l.iK.div`
  ${t=>{let{theme:e}=t;return`\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    width: 100%;\n    max-width: ${v.UB}px;\n    max-height: calc(100vh - 56px);\n    border-radius: ${e.gridUnit}px;\n    background-color: ${e.colors.grayscale.light5};\n    margin-left: auto;\n    margin-right: auto;\n    padding-left: ${4*e.gridUnit}px;\n    padding-right: ${4*e.gridUnit}px;\n    padding-bottom: ${4*e.gridUnit}px;\n\n    h3 {\n      padding-bottom: ${3*e.gridUnit}px;\n    }\n\n    & .dataset {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n\n      & > div {\n        min-width: 200px;\n        width: 300px;\n      }\n\n      & > span {\n        color: ${e.colors.grayscale.light1};\n        margin-left: ${4*e.gridUnit}px;\n      }\n    }\n\n    & .viz-gallery {\n      border: 1px solid ${e.colors.grayscale.light2};\n      border-radius: ${e.gridUnit}px;\n      margin: ${e.gridUnit}px 0px;\n      max-height: calc(100vh - 306px);\n      flex: 1;\n    }\n\n    & .footer {\n      flex: 1;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-end;\n      align-items: center;\n\n      & > span {\n        color: ${e.colors.grayscale.light1};\n        margin-right: ${4*e.gridUnit}px;\n      }\n    }\n\n    /* The following extra ampersands (&&&&) are used to boost selector specificity */\n\n    &&&& .ant-steps-item-tail {\n      display: none;\n    }\n\n    &&&& .ant-steps-item-icon {\n      margin-right: ${2*e.gridUnit}px;\n      width: ${5*e.gridUnit}px;\n      height: ${5*e.gridUnit}px;\n      line-height: ${5*e.gridUnit}px;\n    }\n\n    &&&& .ant-steps-item-title {\n      line-height: ${5*e.gridUnit}px;\n    }\n\n    &&&& .ant-steps-item-content {\n      overflow: unset;\n\n      .ant-steps-item-description {\n        margin-top: ${e.gridUnit}px;\n      }\n    }\n\n    &&&& .ant-tooltip-open {\n      display: inline;\n    }\n\n    &&&& .ant-select-selector {\n      padding: 0;\n    }\n\n    &&&& .ant-select-selection-placeholder {\n      padding-left: ${3*e.gridUnit}px;\n    }\n  `}}
`,U=l.iK.div`
  ${t=>{let{theme:e,hasDescription:n}=t;return`\n    .tooltip-header {\n      font-size: ${n?e.typography.sizes.l:e.typography.sizes.s}px;\n      font-weight: ${n?e.typography.weights.bold:e.typography.weights.normal};\n    }\n\n    .tooltip-description {\n      margin-top: ${2*e.gridUnit}px;\n      display: -webkit-box;\n      -webkit-line-clamp: 20;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  `}}
`,_=l.iK.span`
  ${t=>{let{theme:e}=t;return`\n    position: absolute;\n    left: ${3*e.gridUnit}px;\n    right: ${3*e.gridUnit}px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `}}
`,C=l.iK.span`
  ${t=>{let{theme:{typography:{sizes:e,weights:n}}}=t;return`\n      font-size: ${e.m}px;\n      font-weight: ${n.bold};\n    `}}
`,k=l.iK.div`
  ${t=>{let{theme:{gridUnit:e}}=t;return`\n    margin-top: ${4*e}px;\n    margin-bottom: ${3*e}px;\n  `}}
`;class S extends i.PureComponent{constructor(t){super(t),this.state={vizType:null,canCreateDataset:(0,w.R)("can_write","Dataset",t.user.roles)},this.changeDatasource=this.changeDatasource.bind(this),this.changeVizType=this.changeVizType.bind(this),this.gotoSlice=this.gotoSlice.bind(this),this.newLabel=this.newLabel.bind(this),this.loadDatasources=this.loadDatasources.bind(this),this.onVizTypeDoubleClick=this.onVizTypeDoubleClick.bind(this)}componentDidMount(){var t;const e=null==(t=o.parse(window.location.search))?void 0:t.dataset;e&&(this.loadDatasources(e,0,1).then((t=>{const e=t.data[0];e.label=e.customLabel,this.setState({datasource:e})})),this.props.addSuccessToast((0,d.t)("The dataset has been saved")))}exploreUrl(){var t;const e=(0,h.eY)(g.KD.dashboardId);let n=`/explore/?viz_type=${this.state.vizType}&datasource=${null==(t=this.state.datasource)?void 0:t.value}`;return(0,c.Z)(e)&&(n+=`&dashboard_id=${e}`),n}gotoSlice(){this.props.history.push(this.exploreUrl())}changeDatasource(t){this.setState({datasource:t})}changeVizType(t){this.setState({vizType:t})}isBtnDisabled(){var t;return!(null!=(t=this.state.datasource)&&t.value&&this.state.vizType)}onVizTypeDoubleClick(){this.isBtnDisabled()||this.gotoSlice()}newLabel(t){return(0,D.tZ)(y.u,{mouseEnterDelay:1,placement:"right",title:(0,D.tZ)(U,{hasDescription:!!t.description},(0,D.tZ)("div",{className:"tooltip-header"},t.table_name),t.description&&(0,D.tZ)("div",{className:"tooltip-description"},t.description))},(0,D.tZ)(_,null,t.table_name))}loadDatasources(t,e,n){const i=s().encode({columns:["id","table_name","description","datasource_type"],filters:[{col:"table_name",opr:"ct",value:t}],page:e,page_size:n,order_column:"table_name",order_direction:"asc"});return p.Z.get({endpoint:`/api/v1/dataset/?q=${i}`}).then((t=>({data:t.json.result.map((t=>({id:t.id,value:`${t.id}__${t.datasource_type}`,customLabel:this.newLabel(t),label:t.table_name}))),totalCount:t.json.count})))}render(){var t;const e=this.isBtnDisabled(),n=(0,d.t)("view instructions"),i=this.state.canCreateDataset?(0,D.tZ)("span",null,(0,D.tZ)(u.rU,{to:"/dataset/add/"},(0,d.t)("Add a dataset")," "),(0,d.t)("or")," ",(0,D.tZ)("a",{href:"https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#registering-a-new-table",rel:"noopener noreferrer",target:"_blank"},`${n} `,(0,D.tZ)("i",{className:"fa fa-external-link"})),"."):(0,D.tZ)("span",null,(0,D.tZ)("a",{href:"https://superset.apache.org/docs/creating-charts-dashboards/creating-your-first-dashboard/#registering-a-new-table",rel:"noopener noreferrer",target:"_blank"},`${n} `,(0,D.tZ)("i",{className:"fa fa-external-link"})),".");return(0,D.tZ)(T,null,(0,D.tZ)("h3",null,(0,d.t)("Create a new chart")),(0,D.tZ)(x.Rg,{direction:"vertical",size:"small"},(0,D.tZ)(x.Rg.Step,{title:(0,D.tZ)(C,null,(0,d.t)("Choose a dataset")),status:null!=(t=this.state.datasource)&&t.value?"finish":"process",description:(0,D.tZ)(k,{className:"dataset"},(0,D.tZ)(x.qb,{autoFocus:!0,ariaLabel:(0,d.t)("Dataset"),name:"select-datasource",onChange:this.changeDatasource,options:this.loadDatasources,optionFilterProps:["id","label"],placeholder:(0,d.t)("Choose a dataset"),showSearch:!0,value:this.state.datasource}),i)}),(0,D.tZ)(x.Rg.Step,{title:(0,D.tZ)(C,null,(0,d.t)("Choose chart type")),status:this.state.vizType?"finish":"process",description:(0,D.tZ)(k,null,(0,D.tZ)(v.ZP,{denyList:z,className:"viz-gallery",onChange:this.changeVizType,onDoubleClick:this.onVizTypeDoubleClick,selectedViz:this.state.vizType}))})),(0,D.tZ)("div",{className:"footer"},e&&(0,D.tZ)("span",null,(0,d.t)("Please select both a Dataset and a Chart type to proceed")),(0,D.tZ)(m.Z,{buttonStyle:"primary",disabled:e,onClick:this.gotoSlice},(0,d.t)("Create new chart"))))}}const V=(0,b.EN)((0,f.ZP)(S))}}]);
//# sourceMappingURL=92b6ec220e2669dfd3e9.chunk.js.map