Cube.js default value of timeDimensions

Question

I am using the Cube.js react client to change the default timeDimension, dateRange, and granularity of my Query.

import { QueryBuilder } from '@cubejs-client/react'

here is what timeDimension property on the JSON Query should look like,

timeDimensions: [
          {
            dimension: 'EMSHistory.startTime',
            dateRange: 'Today',
            granularity: "day"
          },
        ]

The default query is what I see in Cube.js Server Logs. with the default settings of no dateRange property, which means default date range is all time, and granularity of "day".

this return data of all time, grouped by day, while I only want Today's data.

{
  "measures": [
    "EMSHistory.runDurationSum"
  ],
  "timeDimensions": [
    {
      "dimension": "EMSHistory.startTime",
      "granularity": "day"
    }
  ],
  "order": [
    {
      "id": "EMSHistory.startTime",
      "desc": false
    }
  ],
  "filters": [],
  "timezone": "Asia/Taipei",
  "dimensions": []
}

The Query I want should look like this:

{
  "measures": [
    "EMSHistory.runDurationSum"
  ],
  "timeDimensions": [
    {
      "dimension": "EMSHistory.startTime",
      "dateRange": [
        "2021-10-21T00:00:00.000",
        "2021-10-21T23:59:59.999"
      ]
    }
  ],
  "order": [
    {
      "id": "EMSHistory.startTime",
      "desc": false
    }
  ],
  "filters": [],
  "timezone": "Asia/Taipei",
  "dimensions": []
}

below is my code:

const ExploreQueryBuilder = ({
  vizState,
  finalTitle,
  customStyle,
  cubejsApi,
  setVizState,
  chartExtra,
  itemId,
}) => (
  <QueryBuilder
    vizState={vizState}
    finalTitle={finalTitle}
    setVizState={setVizState}
    cubejsApi={cubejsApi}
    wrapWithQueryRenderer={false}
    render={({
      validatedQuery,
      isQueryPresent,
      chartType,
      updateChartType,
      measures,
      availableMeasures,
      updateMeasures,
      dimensions,
      availableDimensions,
      updateDimensions,
      segments,
      availableSegments,
      updateSegments,
      filters,
      updateFilters,
      timeDimensions,
      availableTimeDimensions,
      updateTimeDimensions,
    }) => [
        <Row
          type="flex"
          justify="space-around"
          align="top"
          gutter={24}
          style={{
            marginBottom: 12,
          }}
          key="1"
        >
          <Col span={24}>
            <Card>
              <Row
                type="flex"
                justify="space-around"
                align="top"
                gutter={24}
                style={{
                  marginBottom: 12,
                }}
              >
                <Col span={24}>
                  <MemberGroup
                    members={measures}
                    availableMembers={availableMeasures}
                    addMemberName="Measure"
                    updateMethods={updateMeasures}
                  />
                  <Divider type="vertical" />
                  <MemberGroup
                    members={dimensions}
                    availableMembers={availableDimensions}
                    addMemberName="Dimension"
                    updateMethods={updateDimensions}
                  />
                  <Divider type="vertical" />
                  <MemberGroup
                    members={segments}
                    availableMembers={availableSegments}
                    addMemberName="Segment"
                    updateMethods={updateSegments}
                  />
                  <Divider type="vertical" />
                  <TimeGroup
                    members={timeDimensions}
                    availableMembers={availableTimeDimensions}
                    addMemberName="Time"
                    updateMethods={updateTimeDimensions}
                  />
                </Col>
              </Row>
              <Row
                type="flex"
                justify="space-around"
                align="top"
                gutter={24}
                style={{
                  marginBottom: 12,
                }}
              >
                <Col span={24}>
                  <FilterGroup
                    members={filters}
                    availableMembers={availableDimensions.concat(availableMeasures)}
                    addMemberName="Filter"
                    updateMethods={updateFilters}
                  />
                </Col>
              </Row>
              <Row type="flex" justify="space-around" align="top" gutter={24}>
                <Col span={24}>
                  <SelectChartType chartType={chartType} updateChartType={updateChartType} />
                </Col>
              </Row>
              {itemId ? (
                <Row
                  type="flex"
                  justify="flex-end"
                  align="top"
                  gutter={24}
                  style={{
                    marginTop: 12,
                  }}
                >
                  <Button type="primary">
                    <Link to={'/explore'}>
                      <FormattedMessage id={'component.copy'} />
                    </Link>
                  </Button>
                </Row>
              ) : null}
            </Card>
          </Col>
        </Row>,
        <Row type="flex" justify="space-around" align="top" gutter={24} key="2">
          <Col span={24}>
            {isQueryPresent ? (
              <Card
                title={finalTitle}
                headStyle={customStyle.card ? customStyle.card.headStyle : undefined}
                bodyStyle={customStyle.card ? customStyle.card.bodyStyle : undefined}
                key={new Date()}
                style={{
                  minHeight: 420,
                }}
                extra={chartExtra}
              >
                {filters[0] &&
                  filters[0].operator &&
                  (filters[0].values === undefined || filters[0].values.length === 0) ? (
                  <p>
                    <FormattedMessage id={'component.filter-value'} />
                  </p>
                ) : (
                  <ChartRenderer
                    vizState={{
                      query: validatedQuery,
                      chartType,
                    }}
                    customStyle={customStyle}
                    cubejsApi={cubejsApi}
                  />
                )}
              </Card>
            ) : (
              <h2
                style={{
                  textAlign: 'center',
                }}
              >
                <FormattedMessage id={'component.establish'} />
              </h2>
            )}
          </Col>
        </Row>,
      ]
    }
  />
);

ExploreQueryBuilder.propTypes = {
  vizState: PropTypes.object,
  finalTitle: PropTypes.object,
  customStyle: PropTypes.object,
  setVizState: PropTypes.func,
  cubejsApi: PropTypes.object,
  chartExtra: PropTypes.array,
};
ExploreQueryBuilder.defaultProps = {
  vizState: {},
  customStyle: {},
  setVizState: null,
  cubejsApi: null,
  chartExtra: null,
};
export default ExploreQueryBuilder;