updateMethods.update(member, { ...member, values })}\r\n />\r\n );\r\n};\r\n\r\nFilterInput.propTypes = {\r\n member: PropTypes.object.isRequired,\r\n updateMethods: PropTypes.object.isRequired,\r\n};\r\nexport default FilterInput;\r\n","import React from 'react';\r\nimport * as PropTypes from 'prop-types';\r\nimport { Select } from 'antd';\r\nimport MemberDropdown from './MemberDropdown';\r\nimport RemoveButtonGroup from './RemoveButtonGroup';\r\nimport FilterInput from './FilterInput';\r\nimport PlusIcon from './PlusIcon';\r\n\r\nconst FilterGroup = ({\r\n members,\r\n availableMembers,\r\n addMemberName,\r\n updateMethods,\r\n}) => (\r\n \r\n {members.map((m) => (\r\n \r\n updateMethods.remove(m)}>\r\n \r\n updateMethods.update(m, { ...m, dimension: updateWith })\r\n }\r\n availableMembers={availableMembers}\r\n style={{}}\r\n >\r\n {m.dimension.title}\r\n \r\n \r\n updateMethods.update(m, { ...m, operator })}\r\n style={{ width: 200, marginRight: 8 }}\r\n >\r\n {m.operators.map(\r\n (operator) =>\r\n (m.dimension.type !== 'boolean' ||\r\n operator.title === 'equals') && (\r\n \r\n {operator.title}\r\n \r\n )\r\n )}\r\n \r\n \r\n
\r\n ))}\r\n updateMethods.add({ dimension: m })}\r\n availableMembers={availableMembers}\r\n type=\"new\"\r\n >\r\n {addMemberName}\r\n \r\n \r\n \r\n);\r\n\r\nFilterGroup.propTypes = {\r\n members: PropTypes.array.isRequired,\r\n availableMembers: PropTypes.array.isRequired,\r\n addMemberName: PropTypes.string.isRequired,\r\n updateMethods: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default FilterGroup;\r\n","import React from 'react';\r\nimport * as PropTypes from 'prop-types';\r\nimport { Select } from 'antd';\r\nimport MemberDropdown from './MemberDropdown';\r\nimport RemoveButtonGroup from './RemoveButtonGroup';\r\nimport PlusIcon from './PlusIcon';\r\n\r\nconst OrderGroup = ({\r\n members,\r\n availableMembers,\r\n addMemberName,\r\n updateMethods,\r\n updateFilters,\r\n}) => {\r\n return (\r\n \r\n {members.map((m) => (\r\n \r\n {\r\n updateMethods('remove', m);\r\n }}\r\n >\r\n {\r\n updateMethods('update', m, { ...m, dimension: updateWith });\r\n }}\r\n availableMembers={availableMembers}\r\n style={{}}\r\n >\r\n {m.dimension.title}\r\n \r\n \r\n {\r\n updateMethods('update', m, { ...m, direction });\r\n }}\r\n style={{ width: 150 }}\r\n >\r\n \r\n Ascending\r\n \r\n \r\n Descending\r\n \r\n \r\n
\r\n ))}\r\n {\r\n updateMethods('add', { dimension: m });\r\n }}\r\n availableMembers={availableMembers}\r\n type=\"new\"\r\n >\r\n {addMemberName}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nOrderGroup.propTypes = {\r\n members: PropTypes.array.isRequired,\r\n availableMembers: PropTypes.array.isRequired,\r\n addMemberName: PropTypes.string.isRequired,\r\n updateMethods: PropTypes.object.isRequired,\r\n};\r\n\r\nexport default OrderGroup;\r\n","import React from 'react';\r\nimport { Menu } from 'antd';\r\nimport SubMenu from 'antd/lib/menu/SubMenu';\r\nconst DateRanges = [{ title: 'All time', value: undefined }];\r\nconst CurrentDateRanges = [\r\n { value: 'Today' },\r\n { value: 'Yesterday' },\r\n { value: 'This week' },\r\n { value: 'This month' },\r\n { value: 'This quarter' },\r\n { value: 'This year' },\r\n];\r\n\r\nconst PastDateRanges = [\r\n { value: 'Last 7 days' },\r\n { value: 'Last 30 days' },\r\n { value: 'Last 3 months' },\r\n { value: 'Last 6 months' },\r\n { value: 'Last 12 months' },\r\n { value: 'Last week' },\r\n { value: 'Last month' },\r\n { value: 'Last quarter' },\r\n { value: 'Last year' },\r\n];\r\n\r\nconst FutureDateRanges = [\r\n { value: 'Next 7 days' },\r\n { value: 'Next 30 days' },\r\n { value: 'Next 3 months' },\r\n { value: 'Next 6 months' },\r\n { value: 'Next 12 months' },\r\n { value: 'Next week' },\r\n { value: 'Next month' },\r\n { value: 'Next quarter' },\r\n { value: 'Next year' },\r\n];\r\n\r\nconst DateRangeMenu = ({ onClick, defaultValueLabel }) => (\r\n \r\n);\r\n\r\nexport default DateRangeMenu;\r\n","import React from 'react';\r\nimport * as PropTypes from 'prop-types';\r\nimport { Menu } from 'antd';\r\nimport ButtonDropdown from './ButtonDropdown';\r\nimport MemberDropdown from './MemberDropdown';\r\nimport RemoveButtonGroup from './RemoveButtonGroup';\r\nimport MemberGroupTitle from './MemberGroupTitle';\r\nimport PlusIcon from './PlusIcon';\r\nimport styled from 'styled-components';\r\nimport DateRangeMenu from './DateRangeMenu';\r\n\r\nconst GroupLabel = styled.span`\r\n font-size: 14px;\r\n margin: 0 12px;\r\n`;\r\n\r\nconst TimeGroup = ({\r\n members,\r\n availableMembers,\r\n addMemberName,\r\n updateMethods,\r\n title,\r\n}) => {\r\n const granularityMenu = (member, onClick) => (\r\n \r\n );\r\n\r\n return (\r\n \r\n
\r\n {members.map((m) => [\r\n
updateMethods.remove(m)}\r\n key={`${m.dimension.name}-member`}\r\n >\r\n \r\n updateMethods.update(m, { ...m, dimension: updateWith })\r\n }\r\n availableMembers={availableMembers}\r\n >\r\n {m.dimension.title}\r\n \r\n ,\r\n for,\r\n \r\n updateMethods.update(m, { ...m, dateRange: dateRange.value })\r\n }\r\n />\r\n }\r\n key={`${m.dimension.name}-date-range`}\r\n >\r\n {m.dateRange || 'All time'}\r\n ,\r\n by,\r\n \r\n updateMethods.update(m, { ...m, granularity: granularity.name })\r\n )}\r\n key={`${m.dimension.name}-granularity`}\r\n >\r\n {m.dimension.granularities.find((g) => g.name === m.granularity) &&\r\n m.dimension.granularities.find((g) => g.name === m.granularity)\r\n .title}\r\n ,\r\n ])}\r\n {!members.length && (\r\n \r\n updateMethods.add({ dimension: member, granularity: 'day' })\r\n }\r\n availableMembers={availableMembers}\r\n type=\"new\"\r\n >\r\n {addMemberName}\r\n \r\n \r\n )}\r\n | \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n ),\r\n table: ({ resultSet }) => (\r\n \r\n
({\r\n ...c,\r\n align: c.type === \"number\" ? \"right\" : \"left\",\r\n render: (t) => {\r\n return c.type === \"number\" ? (\r\n {numberFormatter(t)}
\r\n ) : c.type === \"time\" ? (\r\n smartDateFormatter(t)\r\n ) : c.format === \"link\" ? (\r\n \r\n Link\r\n \r\n ) : c.type === \"boolean\" ? (\r\n t ? (\r\n \"Yes\"\r\n ) : (\r\n \"No\"\r\n )\r\n ) : (\r\n t\r\n );\r\n },\r\n dataIndex: c.key,\r\n }))}\r\n dataSource={resultSet.tablePivot()}\r\n />\r\n \r\n \r\n {resultSet.seriesNames().map((s) => (\r\n \r\n ))}\r\n \r\n
\r\n ),\r\n};\r\nconst TypeToMemoChartComponent = Object.keys(TypeToChartComponent)\r\n .map((key) => ({\r\n [key]: React.memo(TypeToChartComponent[key]),\r\n }))\r\n .reduce((a, b) => ({ ...a, ...b }));\r\n\r\nconst SpinContainer = styled.div`\r\n text-align: center;\r\n\r\n margin-bottom: 10px;\r\n`;\r\n\r\nconst TimeRange = styled.div`\r\n margin-top: -25px;\r\n font-size: 13px;\r\n font-family: monospace;\r\n margin-bottom: 10px;\r\n`;\r\n\r\nconst Spinner = () => (\r\n \r\n \r\n \r\n);\r\n\r\nconst renderChart =\r\n (Component) =>\r\n ({\r\n name,\r\n handleBarClick,\r\n resultSet,\r\n error,\r\n chartType,\r\n height,\r\n setChart,\r\n handleDownload,\r\n }) => {\r\n const formattedTimeDimensions =\r\n resultSet &&\r\n resultSet.loadResponse.query.timeDimensions.length > 0 &&\r\n resultSet.loadResponse.query.timeDimensions[0].dateRange\r\n ? `${moment(resultSet.loadResponse.query.timeDimensions[0].dateRange[0])\r\n .add(1, \"second\")\r\n .format(\"LL\")} – ${moment(\r\n resultSet.loadResponse.query.timeDimensions[0].dateRange[1]\r\n ).format(\"LL\")}`\r\n : null;\r\n console.log(`resultSet`, resultSet && resultSet.tableColumns());\r\n return (\r\n (resultSet && (\r\n <>\r\n {{formattedTimeDimensions || \"All the time\"}}\r\n setChart(ref)}\r\n height={height}\r\n resultSet={resultSet}\r\n handleBarClick={handleBarClick}\r\n />\r\n {chartType !== \"number\" && (\r\n <>\r\n ({ label: c.title, key: c.key }))}\r\n filename={`${name || \"export\"}.csv`}\r\n data={resultSet.tablePivot()}\r\n >\r\n CSV\r\n \r\n {\" | \"}\r\n XLS\r\n }\r\n filename={name}\r\n >\r\n \r\n {resultSet.tableColumns().map((c) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n )}\r\n {chartType !== \"table\" && chartType !== \"number\" && (\r\n <>\r\n {chartType !== \"number\" && \" | \"}\r\n \r\n PNG\r\n \r\n \r\n )}\r\n \r\n )) ||\r\n (error && error.toString()) || \r\n );\r\n };\r\n\r\nconst ChartRenderer = ({\r\n dateRange,\r\n selectedBusinesses,\r\n name,\r\n vizState,\r\n chartHeight,\r\n}) => {\r\n const [chart, setChart] = React.useState();\r\n\r\n const handleDownload = React.useCallback(async () => {\r\n if (chart !== undefined) {\r\n // Send the chart to getPngData\r\n const pngData = await getPngData(chart);\r\n // Use FileSaver to download the PNG\r\n FileSaver.saveAs(pngData, `${name}_chart.png`);\r\n }\r\n }, [chart]);\r\n\r\n const { query, chartType } = vizState;\r\n const [drillDownQuery, setDrillDownQuery] = useState();\r\n\r\n // eslint-disable-next-line no-unused-vars\r\n const [tableData, setTableData] = useState(null);\r\n\r\n if (dateRange) {\r\n if (query.timeDimensions.length > 0) {\r\n query.timeDimensions[0].dateRange = dateRange;\r\n }\r\n }\r\n\r\n if (selectedBusinesses && selectedBusinesses.length > 0) {\r\n if (!query.filters) query.filters = [];\r\n\r\n //Check if there is a filter already for locations\r\n const foundFilter = query.filters.find(\r\n (f) => f.dimension === \"Businesses.Id\" && f.operator === \"equals\"\r\n );\r\n const bids = selectedBusinesses.map((b) => b.Id.toString());\r\n if (foundFilter) {\r\n query.filters.splice(query.filters.indexOf(foundFilter), 1);\r\n }\r\n query.filters.push({\r\n dimension: \"Businesses.Id\",\r\n operator: \"equals\",\r\n values: bids,\r\n });\r\n }\r\n\r\n const renderProps = useCubeQuery(query);\r\n const drillDownResponse = useCubeQuery(\r\n {\r\n ...drillDownQuery,\r\n },\r\n {\r\n skip: !drillDownQuery,\r\n }\r\n );\r\n\r\n useEffect(() => {\r\n if (drillDownResponse.resultSet) {\r\n setTableData(drillDownResponse);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [drillDownResponse.isLoading]);\r\n\r\n function handleBarClick(event, yValues) {\r\n if (event.xValues != null) {\r\n const { resultSet } = renderProps;\r\n const drillDownQuery = resultSet.drillDown({\r\n xValues: event.xValues,\r\n yValues,\r\n });\r\n setDrillDownQuery(drillDownQuery);\r\n }\r\n }\r\n\r\n try {\r\n const component = TypeToMemoChartComponent[chartType];\r\n return (\r\n <>\r\n {drillDownQuery && (\r\n {\r\n setDrillDownQuery(null);\r\n setTableData(null);\r\n }}\r\n onOk={() => {\r\n setDrillDownQuery(null);\r\n setTableData(null);\r\n }}\r\n cancelButtonProps={{ style: { display: \"none\" } }}\r\n >\r\n {!drillDownResponse.isLoading &&\r\n renderChart(TypeToMemoChartComponent[\"table\"])({\r\n name: \"Drill down data\",\r\n height: 200,\r\n setChart,\r\n handleDownload,\r\n ...drillDownResponse,\r\n })}\r\n\r\n {drillDownResponse.isLoading && }\r\n \r\n )}\r\n {component &&\r\n renderChart(component)({\r\n chartType,\r\n name,\r\n height: chartHeight,\r\n handleBarClick,\r\n setChart,\r\n handleDownload,\r\n ...renderProps,\r\n })}\r\n \r\n );\r\n } catch (ex) {\r\n return Error: {ex}
;\r\n }\r\n};\r\n\r\nChartRenderer.propTypes = {\r\n vizState: PropTypes.object,\r\n cubejsApi: PropTypes.object,\r\n};\r\nChartRenderer.defaultProps = {\r\n vizState: {},\r\n chartHeight: 300,\r\n cubejsApi: null,\r\n};\r\nexport default ChartRenderer;\r\n","export default (oldState, newState) => {\r\n const { query, sessionGranularity } = oldState;\r\n const defaultGranularity = sessionGranularity || 'day';\r\n if (newState.query) {\r\n const oldQuery = query;\r\n let newQuery = newState.query;\r\n\r\n const { meta } = oldState;\r\n\r\n if (\r\n (oldQuery.timeDimensions || []).length === 1\r\n && (newQuery.timeDimensions || []).length === 1\r\n && newQuery.timeDimensions[0].granularity\r\n && oldQuery.timeDimensions[0].granularity !== newQuery.timeDimensions[0].granularity\r\n ) {\r\n newState = {\r\n ...newState,\r\n sessionGranularity: newQuery.timeDimensions[0].granularity,\r\n };\r\n }\r\n\r\n if (\r\n (oldQuery.measures || []).length === 0 && (newQuery.measures || []).length > 0\r\n || (\r\n (oldQuery.measures || []).length === 1\r\n && (newQuery.measures || []).length === 1\r\n && oldQuery.measures[0] !== newQuery.measures[0]\r\n )\r\n ) {\r\n const defaultTimeDimension = meta.defaultTimeDimensionNameFor(newQuery.measures[0]);\r\n newQuery = {\r\n ...newQuery,\r\n timeDimensions: defaultTimeDimension ? [{\r\n dimension: defaultTimeDimension,\r\n granularity: defaultGranularity,\r\n dateRange: \"Last 30 days\"\r\n }] : [],\r\n };\r\n return {\r\n ...newState,\r\n query: newQuery,\r\n chartType: defaultTimeDimension ? 'line' : 'number'\r\n };\r\n }\r\n\r\n if (\r\n (oldQuery.dimensions || []).length === 0\r\n && (newQuery.dimensions || []).length > 0\r\n ) {\r\n newQuery = {\r\n ...newQuery,\r\n timeDimensions: (newQuery.timeDimensions || []).map(td => ({ ...td, granularity: undefined })),\r\n };\r\n return {\r\n ...newState,\r\n query: newQuery,\r\n chartType: 'table'\r\n };\r\n }\r\n\r\n if (\r\n (oldQuery.dimensions || []).length > 0\r\n && (newQuery.dimensions || []).length === 0\r\n ) {\r\n newQuery = {\r\n ...newQuery,\r\n timeDimensions: (newQuery.timeDimensions || []).map(td => ({\r\n ...td, granularity: td.granularity || defaultGranularity\r\n })),\r\n };\r\n return {\r\n ...newState,\r\n query: newQuery,\r\n chartType: (newQuery.timeDimensions || []).length ? 'line' : 'number'\r\n };\r\n }\r\n\r\n if (\r\n (\r\n (oldQuery.dimensions || []).length > 0\r\n || (oldQuery.measures || []).length > 0\r\n )\r\n && (newQuery.dimensions || []).length === 0\r\n && (newQuery.measures || []).length === 0\r\n ) {\r\n newQuery = {\r\n ...newQuery,\r\n timeDimensions: [],\r\n filters: []\r\n };\r\n return {\r\n ...newState,\r\n query: newQuery,\r\n sessionGranularity: null\r\n };\r\n }\r\n return newState;\r\n }\r\n\r\n if (newState.chartType) {\r\n const newChartType = newState.chartType;\r\n if (\r\n (newChartType === 'line' || newChartType === 'area')\r\n && (query.timeDimensions || []).length === 1\r\n && !query.timeDimensions[0].granularity\r\n ) {\r\n const [td] = query.timeDimensions;\r\n return {\r\n ...newState,\r\n query: {\r\n ...query,\r\n timeDimensions: [{ ...td, granularity: defaultGranularity }]\r\n }\r\n };\r\n }\r\n\r\n if (\r\n (newChartType === 'pie' || newChartType === 'table' || newChartType === 'number')\r\n && (query.timeDimensions || []).length === 1\r\n && query.timeDimensions[0].granularity\r\n ) {\r\n const [td] = query.timeDimensions;\r\n return {\r\n ...newState,\r\n query: {\r\n ...query,\r\n timeDimensions: [{ ...td, granularity: undefined }]\r\n }\r\n };\r\n }\r\n }\r\n\r\n return newState;\r\n }\r\n","import React, { useState } from 'react';\r\nimport * as PropTypes from 'prop-types';\r\nimport { Row, Col, Card, Divider } from 'antd';\r\nimport styled from 'styled-components';\r\nimport { QueryBuilder } from '@cubejs-client/react';\r\nimport MemberGroup from './MemberGroup';\r\nimport FilterGroup from './FilterGroup';\r\nimport OrderGroup from './OrderGroup';\r\nimport TimeGroup from './TimeGroup';\r\nimport SelectChartType from './SelectChartType';\r\nimport ChartRenderer from '../ChartRenderer';\r\nimport stateChangeHeuristics from './stateChangeHeuristics.js';\r\n\r\nconst ControlsRow = styled(Row)`\r\n background: #ffffff;\r\n margin-bottom: 12px;\r\n padding: 18px 28px 10px 28px;\r\n`;\r\n\r\nconst StyledDivider = styled(Divider)`\r\n margin: 0 12px;\r\n height: 4.5em;\r\n top: 0.5em;\r\n background: #f4f5f6;\r\n`;\r\n\r\nconst HorizontalDivider = styled(Divider)`\r\n padding: 0;\r\n margin: 0;\r\n background: #f4f5f6;\r\n`;\r\n\r\nconst ChartCard = styled(Card)`\r\n border-radius: 4px;\r\n border: none;\r\n`;\r\n\r\nconst ChartRow = styled(Row)`\r\n padding-left: 28px;\r\n padding-right: 28px;\r\n`;\r\n\r\nconst Empty = styled.div`\r\n text-align: center;\r\n margin-top: 185px;\r\n`;\r\n\r\nconst ExploreQueryBuilder = ({\r\n vizState,\r\n cubejsApi,\r\n setVizState,\r\n chartExtra,\r\n}) => {\r\n const [orders, setOrders] = useState(vizState.orders || []);\r\n\r\n const updateOrder = {\r\n add: (o) => {\r\n orders.push(o);\r\n setOrders(orders);\r\n },\r\n remove: (o) => {\r\n var index = orders.indexOf(o);\r\n orders.splice(index, 1);\r\n setOrders(orders);\r\n },\r\n update: (old, nw) => {\r\n var index = orders.indexOf(old);\r\n orders[index] = nw;\r\n },\r\n };\r\n\r\n const getOrderObject = () => {\r\n const orderObj = {};\r\n for (let index = 0; index < orders.length; index++) {\r\n const order = orders[index];\r\n orderObj[order.dimension.name] = order.direction || 'asc';\r\n }\r\n return orderObj;\r\n };\r\n\r\n return (\r\n {\r\n a.query.order = getOrderObject();\r\n a.orders = orders;\r\n setVizState(a);\r\n }}\r\n cubejsApi={cubejsApi}\r\n wrapWithQueryRenderer={false}\r\n stateChangeHeuristics={stateChangeHeuristics}\r\n render={({\r\n measures,\r\n availableMeasures,\r\n updateMeasures,\r\n dimensions,\r\n availableDimensions,\r\n updateDimensions,\r\n segments,\r\n availableSegments,\r\n updateSegments,\r\n filters,\r\n updateFilters,\r\n timeDimensions,\r\n availableTimeDimensions,\r\n updateTimeDimensions,\r\n isQueryPresent,\r\n chartType,\r\n updateChartType,\r\n validatedQuery,\r\n cubejsApi,\r\n }) => [\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {!!isQueryPresent && [\r\n ,\r\n \r\n \r\n \r\n \r\n ,\r\n ,\r\n \r\n \r\n {\r\n updateOrder[action](...rest);\r\n updateChartType(chartType); //force the refresh of the chart\r\n }}\r\n />\r\n \r\n ,\r\n ]}\r\n \r\n ,\r\n \r\n \r\n {isQueryPresent ? (\r\n [\r\n \r\n \r\n
,\r\n \r\n \r\n ,\r\n ]\r\n ) : (\r\n \r\n Start exploring!
\r\n Choose a measure or dimension to get started
\r\n \r\n )}\r\n \r\n ,\r\n ]}\r\n />\r\n );\r\n};\r\nExploreQueryBuilder.propTypes = {\r\n vizState: PropTypes.object,\r\n setVizState: PropTypes.func,\r\n cubejsApi: PropTypes.object,\r\n chartExtra: PropTypes.array,\r\n};\r\nExploreQueryBuilder.defaultProps = {\r\n vizState: {},\r\n setVizState: null,\r\n cubejsApi: null,\r\n chartExtra: null,\r\n};\r\nexport default ExploreQueryBuilder;\r\n","import gql from \"graphql-tag\";\r\n\r\nexport const CREATE_DASHBOARD_ITEM = gql`\r\n mutation CreateDashboardItem($input: DashboardItemInput) {\r\n createDashboardItem(input: $input) {\r\n id\r\n layout\r\n vizState\r\n name\r\n }\r\n }\r\n`;\r\n\r\nexport const UPDATE_DASHBOARD_ITEM = gql`\r\n mutation UpdateDashboardItem($id: String!, $input: DashboardItemInput) {\r\n updateDashboardItem(id: $id, input: $input) {\r\n id\r\n layout\r\n vizState\r\n name\r\n }\r\n }\r\n`;\r\n\r\nexport const DELETE_DASHBOARD_ITEM = gql`\r\n mutation DeleteDashboardItem($id: String!) {\r\n deleteDashboardItem(id: $id) {\r\n id\r\n layout\r\n vizState\r\n name\r\n }\r\n }\r\n`;\r\n","import React, { useState } from 'react';\r\nimport { Form, Modal, Input, Alert } from 'antd';\r\n\r\nimport { useMutation } from '@apollo/react-hooks';\r\nimport { GET_DASHBOARD_ITEMS } from '../graphql/queries';\r\nimport {\r\n CREATE_DASHBOARD_ITEM,\r\n UPDATE_DASHBOARD_ITEM,\r\n} from '../graphql/mutations';\r\n\r\nconst layout = {\r\n labelCol: { span: 8 },\r\n wrapperCol: { span: 16 },\r\n};\r\n\r\nconst TitleModal = ({\r\n history,\r\n itemId,\r\n titleModalVisible,\r\n setTitleModalVisible,\r\n setAddingToDashboard,\r\n finalVizState,\r\n setTitle,\r\n finalTitle,\r\n finalDashboardName,\r\n setDashboardName,\r\n}) => {\r\n const [error, setError] = useState(null);\r\n const [addDashboardItem] = useMutation(CREATE_DASHBOARD_ITEM, {\r\n refetchQueries: [\r\n {\r\n query: GET_DASHBOARD_ITEMS,\r\n },\r\n ],\r\n });\r\n const [updateDashboardItem] = useMutation(UPDATE_DASHBOARD_ITEM, {\r\n refetchQueries: [\r\n {\r\n query: GET_DASHBOARD_ITEMS,\r\n },\r\n ],\r\n });\r\n return (\r\n <>\r\n {error && (\r\n setError(null)}\r\n type=\"error\"\r\n message={error.toString()}\r\n />\r\n )}\r\n {\r\n setTitleModalVisible(false);\r\n setAddingToDashboard(true);\r\n\r\n try {\r\n await (itemId ? updateDashboardItem : addDashboardItem)({\r\n variables: {\r\n id: itemId,\r\n input: {\r\n vizState: JSON.stringify(finalVizState),\r\n name: finalTitle,\r\n dashboardName: finalDashboardName,\r\n },\r\n },\r\n });\r\n history.push(`/dashboards/${finalDashboardName}`);\r\n } catch (ex) {\r\n setError('Error: ' + ex);\r\n } finally {\r\n setAddingToDashboard(false);\r\n }\r\n }}\r\n onCancel={() => setTitleModalVisible(false)}\r\n >\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default TitleModal;\r\n","import React from \"react\";\r\nimport { Row, Col } from \"antd\";\r\nimport styled from 'styled-components';\r\n\r\nconst StyledRow = styled(Row)`\r\n padding: 23px 28px 13px 28px;\r\n background: white;\r\n`\r\n\r\nconst ButtonsCol = styled(Col)`\r\n text-align: right;\r\n`\r\n\r\nconst PageHeader = ({ title, button, noBorder }) => (\r\n \r\n \r\n {title}\r\n \r\n \r\n {button}\r\n \r\n \r\n);\r\n\r\nexport default PageHeader;\r\n","import React from 'react';\r\nimport { Typography } from 'antd';\r\nimport { Link } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\n\r\nconst StyledLink = styled(Link)`\r\n && {\r\n color: #d5d5de;\r\n &:hover {\r\n color: #7a77ff;\r\n }\r\n }\r\n`;\r\n\r\nconst StyledDash = styled.span`\r\n color: #d5d5de;\r\n`;\r\n\r\nconst ExploreTitle = ({ itemTitle }) => (\r\n \r\n {itemTitle ? (\r\n \r\n Dashboard\r\n — \r\n {itemTitle}\r\n \r\n ) : (\r\n 'Designer'\r\n )}\r\n \r\n);\r\n\r\nexport default ExploreTitle;\r\n","import React, { useState } from 'react';\r\nimport { Alert, Button, Spin } from 'antd';\r\nimport { useQuery } from '@apollo/react-hooks';\r\nimport { withRouter } from 'react-router-dom';\r\nimport ExploreQueryBuilder from '../components/QueryBuilder/ExploreQueryBuilder';\r\nimport { GET_DASHBOARD_ITEM } from '../graphql/queries';\r\nimport TitleModal from '../components/TitleModal.js';\r\nimport { isQueryPresent } from '@cubejs-client/react';\r\nimport PageHeader from '../components/PageHeader.js';\r\nimport ExploreTitle from '../components/ExploreTitle.js';\r\n\r\nconst ExplorePage = withRouter(({ history, location }) => {\r\n const [addingToDashboard, setAddingToDashboard] = useState(false);\r\n const params = new URLSearchParams(location.search);\r\n const itemId = params.get('itemId');\r\n const { loading, error, data } = useQuery(GET_DASHBOARD_ITEM, {\r\n variables: {\r\n id: itemId,\r\n },\r\n skip: !itemId,\r\n });\r\n const [vizState, setVizState] = useState(null);\r\n const finalVizState =\r\n vizState ||\r\n (itemId && !loading && data && JSON.parse(data.dashboardItem.vizState)) ||\r\n {};\r\n const [titleModalVisible, setTitleModalVisible] = useState(false);\r\n const [title, setTitle] = useState(null);\r\n const [dashboardName, setDashboardName] = useState(null);\r\n const finalTitle =\r\n title != null\r\n ? title\r\n : (itemId && !loading && data && data.dashboardItem.name) || 'New Chart';\r\n\r\n const finalDashboardName =\r\n dashboardName != null\r\n ? dashboardName\r\n : (itemId && !loading && data && data.dashboardItem.dashboardName) ||\r\n 'Dashboard';\r\n\r\n if (loading) {\r\n return ;\r\n }\r\n\r\n if (error) {\r\n return ;\r\n }\r\n\r\n return (\r\n \r\n
\r\n
}\r\n button={\r\n
setTitleModalVisible(true)}\r\n >\r\n {itemId ? 'Update' : 'Add to Dashboard'}\r\n \r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const Empty = () => (\r\n \r\n There are no charts on this dashboard
\r\n \r\n \r\n \r\n \r\n );\r\n\r\n const decodedDashboardName = decodeURIComponent(match.params.dashboardName);\r\n const items =\r\n data &&\r\n data.dashboardItems.filter(\r\n (item, i) => item.dashboardName == decodedDashboardName\r\n );\r\n const Title = styled.h4`\r\n display: inline;\r\n margin-right: 10px;\r\n `;\r\n\r\n return !data || data.dashboardItems.length ? (\r\n \r\n
\r\n \r\n <Typography.Title level={4} style={{ display: \"inline\" }}>\r\n {decodedDashboardName}\r\n </Typography.Title>\r\n \r\n \r\n setDateRange(selectedDateRange.value)\r\n }\r\n />\r\n }\r\n >\r\n {dateRange || \"Default time range\"}\r\n \r\n {\" - \"}\r\n {\r\n setSelectedBusinesses(biz);\r\n }}\r\n />\r\n }\r\n >\r\n {selectedBusinesses.length > 0\r\n ? selectedBusinesses.map((b) => b.Name).join(\", \")\r\n : \"All locations\"}\r\n \r\n