[英]Cube.js QueryBuilder does not rerender when new timeDimensions provided
I'm trying to get cube.js client showing data filtered with data provided in timeDimensions
props.我正在尝试让 cube.js 客户端显示使用
timeDimensions
道具中提供的数据过滤的数据。
I'm trying all latest version.我正在尝试所有最新版本。
I have tried QueryBuilder
render props method updateTimeDimensions
( codesandbox ).我已经尝试过
QueryBuilder
渲染道具方法updateTimeDimensions
( codesandbox )。 Tried update time dimensions and pass to query
props ( codesandbox ).尝试更新时间维度并传递给
query
道具( codeandbox )。
Here is the passing props version:这是传递的道具版本:
const App = () => {
const [dateRange, updateDateRange] = useState([
moment("2019-01-01").format(defaultFormat),
moment('2019-04-01').format(defaultFormat)
]);
const query = {
timeDimensions: [
{
dimension: "LineItems.createdAt",
granularity: "month",
dateRange
}
]
}
console.log(query)
console.log(dateRange)
return (
<>
<RangePicker
defaultValue={[moment("2019-01-01"), moment('2019-04-01').startOf("day")]}
onChange={([startDate, endDate]) => {
updateDateRange([
startDate.format(defaultFormat),
endDate.format(defaultFormat)
]);
}}
/>
{dateRange && <QueryBuilder
query={query}
cubejsApi={cubejsApi}
render={({
resultSet,
measures,
availableMeasures,
updateMeasures
}) => (
<Layout.Content style={{ padding: "20px" }}>
<Select
mode="multiple"
style={{ width: "100%" }}
placeholder="Please select"
onSelect={m =>
updateMeasures.add(find(propEq("name", m))(availableMeasures))
}
onDeselect={m =>
updateMeasures.remove(
find(propEq("name", m))(availableMeasures)
)
}
>
{availableMeasures.map(measure => (
<Select.Option key={measure.name} value={measure.name}>
{measure.title}
</Select.Option>
))}
</Select>
<Divider />
{measures.length > 0 ? (
<ChartRenderer resultSet={resultSet} />
) : (
<Empty description="Select a measure and date range to get started" />
)}
</Layout.Content>
)}
/>}
</>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Log show dateRange
when changing date rage as expected.按预期更改日期
dateRange
时记录显示dateRange
。 But cube.js component rerendering not triggered when changing date range.但是在更改日期范围时不会触发 cube.js 组件重新渲染。
Object {timeDimensions: Array[1]}
["2019-01-01", "2019-04-01"]
Object {timeDimensions: Array[1]}
["2019-01-01", "2019-04-30"]
Object {timeDimensions: Array[1]}
["2019-01-01", "2019-05-31"]
When updateDateRange
is called it overwrites whole query
state of QueryBuilder
which removes any measures
set before.当
updateDateRange
被调用时,它会覆盖QueryBuilder
整个query
状态,从而删除之前设置的任何measures
。 When you maintain query
state outside of QueryBuilder
you should pass setQuery
to update your own state when it's changed by QueryBuilder
: https://cube.dev/docs/@cubejs-client-react#query-builder-props当您在
QueryBuilder
之外维护query
状态时,您应该传递setQuery
以在QueryBuilder
更改状态时更新您自己的状态: https : QueryBuilder
Please see updated example here: https://codesandbox.io/s/react-query-builder-with-cubejs-4jwj5请在此处查看更新的示例: https : //codesandbox.io/s/react-query-builder-with-cubejs-4jwj5
const App = () => {
const [dateRange, updateDateRange] = useState([
moment("2019-01-01").format(defaultFormat),
moment("2019-04-01").format(defaultFormat)
]);
const [query, setQuery] = useState({});
const applyNewQuery = query => {
let newQuery = query;
if (newQuery.timeDimensions && newQuery.timeDimensions[0]) {
newQuery = {
...newQuery,
timeDimensions: [
{
...newQuery.timeDimensions[0],
dateRange,
granularity: "month"
}
]
};
}
setQuery(newQuery);
};
useEffect(() => {
applyNewQuery(query);
}, [dateRange]);
return (
<>
<RangePicker
defaultValue={[
moment("2019-01-01"),
moment("2019-04-01").startOf("day")
]}
onChange={([startDate, endDate]) => {
updateDateRange([
startDate.format(defaultFormat),
endDate.format(defaultFormat)
]);
}}
/>
{dateRange && (
<QueryBuilder
query={query}
setQuery={applyNewQuery}
cubejsApi={cubejsApi}
render={({
resultSet,
measures,
availableMeasures,
updateMeasures
}) => (
<Layout.Content style={{ padding: "20px" }}>
<Select
mode="multiple"
style={{ width: "100%" }}
placeholder="Please select"
onSelect={m =>
updateMeasures.add(find(propEq("name", m))(availableMeasures))
}
onDeselect={m =>
updateMeasures.remove(
find(propEq("name", m))(availableMeasures)
)
}
>
{availableMeasures.map(measure => (
<Select.Option key={measure.name} value={measure.name}>
{measure.title}
</Select.Option>
))}
</Select>
<Divider />
{measures.length > 0 ? (
<ChartRenderer resultSet={resultSet} />
) : (
<Empty description="Select a measure and date range to get started" />
)}
</Layout.Content>
)}
/>
)}
</>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.