victory-histogram 36.8.2 → 36.8.3

package/lib/victory-histogram.d.ts

@@ -0,0 +1,133 @@
+import React from "react";
+import { EventPropTypeInterface, NumberOrCallback, StringOrNumberOrCallback, VictoryCommonProps, VictoryDatableProps, VictoryMultiLabelableProps, VictoryStyleInterface, EventsMixinClass } from "victory-core";
+export declare type VictoryHistogramTargetType = "data" | "labels" | "parent";
+export interface VictoryHistogramProps extends Omit<VictoryCommonProps, "polar">, Omit<VictoryDatableProps, "y" | "y0">, VictoryMultiLabelableProps {
+    binSpacing?: number;
+    bins?: number | number[] | Date[];
+    cornerRadius?: NumberOrCallback | {
+        top?: NumberOrCallback;
+        topLeft?: NumberOrCallback;
+        topRight?: NumberOrCallback;
+        bottom?: NumberOrCallback;
+        bottomLeft?: NumberOrCallback;
+        bottomRight?: NumberOrCallback;
+    };
+    events?: EventPropTypeInterface<VictoryHistogramTargetType, number | string | number[] | string[]>[];
+    eventKey?: StringOrNumberOrCallback;
+    horizontal?: boolean;
+    style?: VictoryStyleInterface;
+}
+interface VictoryHistogramBase extends EventsMixinClass<VictoryHistogramProps> {
+}
+/**
+ * Draw SVG histogram charts with React. VictoryHistogram is a composable component, so it doesn't include axes
+ * Check out VictoryChart for complete histogram charts and more.
+ */
+declare class VictoryHistogramBase extends React.Component<VictoryHistogramProps> {
+    static animationWhitelist: string[];
+    static displayName: string;
+    static role: string;
+    static defaultTransitions: {
+        onLoad: {
+            duration: number;
+            before: () => {
+                _y: number;
+                _y1: number;
+                _y0: number;
+            };
+            after: (datum: any) => {
+                _y: any;
+                _y1: any;
+                _y0: any;
+            };
+        };
+        onExit: {
+            duration: number;
+            before: () => {
+                _y: number;
+                yOffset: number;
+            };
+        };
+        onEnter: {
+            duration: number;
+            before: () => {
+                _y: number;
+                _y1: number;
+                _y0: number;
+            };
+            after: (datum: any) => {
+                _y: any;
+                _y1: any;
+                _y0: any;
+            };
+        };
+    };
+    static getFormattedData: (...args: any[]) => any;
+    static defaultProps: VictoryHistogramProps;
+    static getDomain: (props: VictoryHistogramProps, axis: "y" | "x") => any;
+    static getData: (props: VictoryHistogramProps) => any;
+    static getBaseProps: (props: VictoryHistogramProps) => any;
+    static expectedComponents: Partial<keyof VictoryHistogramProps>[];
+    shouldAnimate(): boolean;
+    render(): React.ReactElement;
+}
+export declare const VictoryHistogram: {
+    new (props: import("victory-core").EventMixinCommonProps): {
+        state: {};
+        getEventState: (eventKey: string | number, namespace: string, childType?: string | undefined) => any;
+        getScopedEvents: (events: any, namespace: any, childType: any, baseProps: any) => {};
+        getEvents: (p: any, target: any, eventKey: any) => any;
+        externalMutations: {} | undefined;
+        calculatedState: {};
+        globalEvents: {};
+        prevGlobalEventKeys: string[];
+        boundGlobalEvents: {};
+        shouldComponentUpdate(nextProps: import("victory-core").EventMixinCommonProps): boolean;
+        componentDidMount(): void;
+        componentDidUpdate(prevProps: any): void;
+        componentWillUnmount(): void;
+        addGlobalListener(key: any): void;
+        removeGlobalListener(key: any): void;
+        getStateChanges(props: any): {};
+        applyExternalMutations(props: any, externalMutations: any): void;
+        getCalculatedValues(props: any): import("victory-core").EventMixinCalculatedValues;
+        getExternalMutations(props: import("victory-core").EventMixinCommonProps): {} | undefined;
+        cacheValues(obj: any): void;
+        getBaseProps(props: any, getSharedEventState: any): Record<string, object>;
+        getAllEvents(props: any): any;
+        getComponentProps(component: React.ReactNode, type: string, index: string | number): any;
+        renderContainer(component: any, children: any): React.DetailedReactHTMLElement<any, HTMLElement>;
+        animateComponent(props: import("victory-core").EventMixinCommonProps, defaultAnimationWhitelist: string[]): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        renderContinuousData(props: import("victory-core").EventMixinCommonProps): React.DetailedReactHTMLElement<any, HTMLElement>;
+        renderData(props: any, shouldRenderDatum?: ((datum: any) => boolean) | undefined): React.DetailedReactHTMLElement<any, HTMLElement>;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("victory-core").EventMixinCommonProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        render(): React.ReactNode;
+        readonly props: Readonly<import("victory-core").EventMixinCommonProps>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("victory-core").EventMixinCommonProps>, prevState: Readonly<{}>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("victory-core").EventMixinCommonProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentEvents: import("victory-core/lib/victory-util/events").ComponentEvent[];
+        getSharedEventState: (key: string, value: string) => unknown;
+        baseProps: Record<string, object>;
+        dataKeys: string[];
+        hasEvents: unknown;
+        events: unknown;
+    };
+    getBaseProps?(props: import("victory-core").EventMixinCommonProps): Record<string, object>;
+    role?: string | undefined;
+    expectedComponents?: string[] | undefined;
+    getChildren?: ((props: import("victory-core").EventMixinCommonProps, childComponents?: React.ReactNode[] | undefined, calculatedProps?: import("victory-core").EventMixinCommonProps | undefined) => void) | undefined;
+    animationWhitelist?: string[] | undefined;
+} & typeof VictoryHistogramBase;
+export {};
+//# sourceMappingURL=victory-histogram.d.ts.map

package/lib/victory-histogram.js

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VictoryHistogram = void 0;
+exports.VictoryHistogram = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _victoryBar = require("victory-bar");
 
 var _victoryCore = require("victory-core");
@@ -17,12 +15,6 @@ var _helperMethods = require("./helper-methods");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -48,20 +40,24 @@ var fallbackProps = {
   height: 300,
   padding: 50
 };
-var defaultData = [];
+var defaultData = []; // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
-var VictoryHistogram = /*#__PURE__*/function (_React$Component) {
-  _inherits(VictoryHistogram, _React$Component);
+/**
+ * Draw SVG histogram charts with React. VictoryHistogram is a composable component, so it doesn't include axes
+ * Check out VictoryChart for complete histogram charts and more.
+ */
+var VictoryHistogramBase = /*#__PURE__*/function (_React$Component) {
+  _inherits(VictoryHistogramBase, _React$Component);
 
-  var _super = _createSuper(VictoryHistogram);
+  var _super = _createSuper(VictoryHistogramBase);
 
-  function VictoryHistogram() {
-    _classCallCheck(this, VictoryHistogram);
+  function VictoryHistogramBase() {
+    _classCallCheck(this, VictoryHistogramBase);
 
     return _super.apply(this, arguments);
   }
 
-  _createClass(VictoryHistogram, [{
+  _createClass(VictoryHistogramBase, [{
     key: "shouldAnimate",
     value: // Overridden in native versions
     function shouldAnimate() {
@@ -70,8 +66,8 @@ var VictoryHistogram = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var animationWhitelist = VictoryHistogram.animationWhitelist,
-          role = VictoryHistogram.role;
+      var animationWhitelist = VictoryHistogramBase.animationWhitelist,
+          role = VictoryHistogramBase.role;
 
       var props = _victoryCore.Helpers.modifyProps(this.props, fallbackProps, role);
 
@@ -85,14 +81,13 @@ var VictoryHistogram = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 
-  return VictoryHistogram;
+  return VictoryHistogramBase;
 }(_react.default.Component);
 
-exports.VictoryHistogram = VictoryHistogram;
-VictoryHistogram.animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
-VictoryHistogram.displayName = "VictoryHistogram";
-VictoryHistogram.role = "histogram";
-VictoryHistogram.defaultTransitions = {
+VictoryHistogramBase.animationWhitelist = ["data", "domain", "height", "padding", "style", "width"];
+VictoryHistogramBase.displayName = "VictoryHistogram";
+VictoryHistogramBase.role = "histogram";
+VictoryHistogramBase.defaultTransitions = {
   onLoad: {
     duration: 2000,
     before: function () {
@@ -137,22 +132,8 @@ VictoryHistogram.defaultTransitions = {
     }
   }
 };
-VictoryHistogram.getFormattedData = _helperMethods.getFormattedData;
-VictoryHistogram.propTypes = _objectSpread(_objectSpread(_objectSpread({}, _victoryCore.CommonProps.baseProps), _victoryCore.CommonProps.dataProps), {}, {
-  binSpacing: _victoryCore.PropTypes.nonNegative,
-  bins: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.instanceOf(Date)])), _victoryCore.PropTypes.nonNegative]),
-  cornerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func, _propTypes.default.shape({
-    top: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
-    topLeft: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
-    topRight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
-    bottom: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
-    bottomLeft: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),
-    bottomRight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func])
-  })]),
-  getPath: _propTypes.default.func,
-  horizontal: _propTypes.default.bool
-});
-VictoryHistogram.defaultProps = {
+VictoryHistogramBase.getFormattedData = _helperMethods.getFormattedData;
+VictoryHistogramBase.defaultProps = {
   containerComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryContainer, null),
   data: defaultData,
   dataComponent: /*#__PURE__*/_react.default.createElement(_victoryBar.Bar, null),
@@ -165,15 +146,13 @@ VictoryHistogram.defaultProps = {
   standalone: true,
   theme: _victoryCore.VictoryTheme.grayscale
 };
-VictoryHistogram.getDomain = _helperMethods.getDomain;
-VictoryHistogram.getData = _helperMethods.getData;
+VictoryHistogramBase.getDomain = _helperMethods.getDomain;
+VictoryHistogramBase.getData = _helperMethods.getData;
 
-VictoryHistogram.getBaseProps = function (props) {
+VictoryHistogramBase.getBaseProps = function (props) {
   return (0, _helperMethods.getBaseProps)(props, fallbackProps);
 };
 
-VictoryHistogram.expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent"];
-
-var _default = (0, _victoryCore.addEvents)(VictoryHistogram);
-
-exports.default = _default;
+VictoryHistogramBase.expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent"];
+var VictoryHistogram = (0, _victoryCore.addEvents)(VictoryHistogramBase);
+exports.VictoryHistogram = VictoryHistogram;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-histogram",
-  "version": "36.8.2",
+  "version": "36.8.3",
   "description": "Histogram Component for Victory",
   "keywords": [
     "data visualization",
@@ -23,9 +23,12 @@
     "lodash": "^4.17.19",
     "prop-types": "^15.8.1",
     "react-fast-compare": "^3.2.0",
-    "victory-bar": "^36.8.2",
-    "victory-core": "^36.8.2",
-    "victory-vendor": "^36.8.2"
+    "victory-bar": "^36.8.3",
+    "victory-core": "^36.8.3",
+    "victory-vendor": "^36.8.3"
+  },
+  "devDependencies": {
+    "victory-histogram": "*"
   },
   "peerDependencies": {
     "react": ">=16.6.0"

package/src/{helper-methods.js → helper-methods.ts}

@@ -4,6 +4,7 @@ import { getBarPosition } from "victory-bar";
 import isEqual from "react-fast-compare";
 import * as d3Array from "victory-vendor/d3-array";
 import * as d3Scale from "victory-vendor/d3-scale";
+import { VictoryHistogramProps } from "./victory-histogram";
 
 const cacheLastValue = (func) => {
   let called = false;
@@ -25,9 +26,14 @@ const cacheLastValue = (func) => {
   };
 };
 
-const dataOrBinsContainDates = ({ data, bins, x }) => {
+const dataOrBinsContainDates = ({
+  data,
+  bins,
+  x,
+}: Pick<VictoryHistogramProps, "data" | "x" | "bins">) => {
   const xAccessor = Helpers.createAccessor(x || "x");
-  const dataIsDates = data.some((datum) => xAccessor(datum) instanceof Date);
+  const dataIsDates =
+    data?.some((datum) => xAccessor(datum) instanceof Date) || false;
   const binsHasDates =
     Array.isArray(bins) && bins.some((bin) => bin instanceof Date);
 
@@ -39,7 +45,9 @@ const getBinningFunc = ({ data, x, bins, dataOrBinsContainsDates }) => {
   const bin = d3Array.bin().value(xAccessor);
 
   const niceScale = (
-    dataOrBinsContainsDates ? d3Scale.scaleTime() : d3Scale.scaleLinear()
+    (dataOrBinsContainsDates
+      ? d3Scale.scaleTime()
+      : d3Scale.scaleLinear()) as any
   )
     .domain(d3Array.extent(data, xAccessor))
     .nice();
@@ -61,8 +69,7 @@ const getBinningFunc = ({ data, x, bins, dataOrBinsContainsDates }) => {
   if (dataOrBinsContainsDates) {
     bin.domain(niceScale.domain());
     bin.thresholds(niceScale.ticks());
-
-    return bin;
+    return bin as unknown as d3Array.HistogramGeneratorDate<Date, Date>;
   }
 
   bin.domain(niceScale.domain());
@@ -70,42 +77,52 @@ const getBinningFunc = ({ data, x, bins, dataOrBinsContainsDates }) => {
   return bin;
 };
 
-export const getFormattedData = cacheLastValue(({ data = [], x, bins }) => {
-  if ((!data || !data.length) && !Array.isArray(bins)) {
-    return [];
-  }
-  const dataOrBinsContainsDates = dataOrBinsContainDates({ data, bins, x });
-  const binFunc = getBinningFunc({ data, x, bins, dataOrBinsContainsDates });
-  const foo = binFunc(data);
-  const binnedData = foo.filter(({ x0, x1 }) => {
-    if (dataOrBinsContainsDates) {
-      return new Date(x0).getTime() !== new Date(x1).getTime();
+export const getFormattedData = cacheLastValue(
+  ({
+    data = [],
+    x,
+    bins,
+  }: Pick<VictoryHistogramProps, "data" | "x" | "bins">) => {
+    if ((!data || !data.length) && !Array.isArray(bins)) {
+      return [];
     }
-
-    return x0 !== x1;
-  });
-
-  const formattedData = binnedData.map((bin) => {
-    const x0 = dataOrBinsContainsDates ? new Date(bin.x0) : bin.x0;
-    const x1 = dataOrBinsContainsDates ? new Date(bin.x1) : bin.x1;
-
-    return {
-      x0,
-      x1,
-      x: dataOrBinsContainsDates
-        ? new Date((x0.getTime() + x1.getTime()) / 2)
-        : (x0 + x1) / 2,
-      y: bin.length,
-      binnedData: [...bin],
-    };
-  });
-
-  return formattedData;
-});
-
-export const getData = (props) => {
+    const dataOrBinsContainsDates = dataOrBinsContainDates({ data, bins, x });
+    const binFunc = getBinningFunc({ data, x, bins, dataOrBinsContainsDates });
+    const foo = binFunc(data);
+    const binnedData = [...foo].filter(({ x0, x1 }) => {
+      if (x0 instanceof Date && x1 instanceof Date) {
+        return new Date(x0).getTime() !== new Date(x1).getTime();
+      }
+
+      return x0 !== x1;
+    });
+
+    const formattedData = binnedData.map((bin) => {
+      const x0 = dataOrBinsContainsDates
+        ? new Date(bin.x0 as Date)
+        : bin.x0 || 0;
+      const x1 = dataOrBinsContainsDates
+        ? new Date(bin.x1 as Date)
+        : bin.x1 || 0;
+
+      return {
+        x0,
+        x1,
+        x: dataOrBinsContainsDates
+          ? new Date(((x0 as Date).getTime() + (x1 as Date).getTime()) / 2)
+          : ((x0 as number) + (x1 as number)) / 2,
+        y: bin.length,
+        binnedData: [...bin],
+      };
+    });
+
+    return formattedData;
+  },
+);
+
+export const getData = (props: VictoryHistogramProps) => {
   const { bins, data, x } = props;
-  const dataIsPreformatted = data.some(({ _y }) => !isNil(_y));
+  const dataIsPreformatted = data?.some(({ _y }) => !isNil(_y));
 
   const formattedData = dataIsPreformatted
     ? data
@@ -113,7 +130,7 @@ export const getData = (props) => {
   return Data.getData({ ...props, data: formattedData, x: "x" });
 };
 
-export const getDomain = (props, axis) => {
+export const getDomain = (props: VictoryHistogramProps, axis: "x" | "y") => {
   const data = getData(props);
 
   if (!data.length) {
@@ -130,7 +147,7 @@ export const getDomain = (props, axis) => {
     );
   }
 
-  return props.data.length
+  return props.data?.length
     ? Domain.getDomainWithZero({ ...props, data }, "y")
     : [0, 1];
 };
@@ -164,9 +181,13 @@ const getCalculatedValues = (props) => {
   return { style, data, scale, domain };
 };
 
-export const getBaseProps = (props, fallbackProps) => {
-  const modifiedProps = Helpers.modifyProps(props, fallbackProps, "histogram");
-  props = assign({}, modifiedProps, getCalculatedValues(modifiedProps));
+export const getBaseProps = (initialProps, fallbackProps) => {
+  const modifiedProps = Helpers.modifyProps(
+    initialProps,
+    fallbackProps,
+    "histogram",
+  );
+  const props = assign({}, modifiedProps, getCalculatedValues(modifiedProps));
 
   const {
     binSpacing,

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./victory-histogram";

package/src/{victory-histogram.js → victory-histogram.tsx}

@@ -1,15 +1,20 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Bar } from "victory-bar";
 import {
   Helpers,
   VictoryLabel,
   VictoryContainer,
   VictoryTheme,
-  CommonProps,
   addEvents,
-  PropTypes as CustomPropTypes,
   UserProps,
+  EventPropTypeInterface,
+  NumberOrCallback,
+  StringOrNumberOrCallback,
+  VictoryCommonProps,
+  VictoryDatableProps,
+  VictoryMultiLabelableProps,
+  VictoryStyleInterface,
+  EventsMixinClass,
 } from "victory-core";
 import {
   getBaseProps,
@@ -18,7 +23,34 @@ import {
   getFormattedData,
 } from "./helper-methods";
 
-const fallbackProps = {
+export type VictoryHistogramTargetType = "data" | "labels" | "parent";
+
+export interface VictoryHistogramProps
+  extends Omit<VictoryCommonProps, "polar">,
+    Omit<VictoryDatableProps, "y" | "y0">,
+    VictoryMultiLabelableProps {
+  binSpacing?: number;
+  bins?: number | number[] | Date[];
+  cornerRadius?:
+    | NumberOrCallback
+    | {
+        top?: NumberOrCallback;
+        topLeft?: NumberOrCallback;
+        topRight?: NumberOrCallback;
+        bottom?: NumberOrCallback;
+        bottomLeft?: NumberOrCallback;
+        bottomRight?: NumberOrCallback;
+      };
+  events?: EventPropTypeInterface<
+    VictoryHistogramTargetType,
+    number | string | number[] | string[]
+  >[];
+  eventKey?: StringOrNumberOrCallback;
+  horizontal?: boolean;
+  style?: VictoryStyleInterface;
+}
+
+const fallbackProps: Partial<VictoryHistogramProps> = {
   width: 450,
   height: 300,
   padding: 50,
@@ -26,7 +58,15 @@ const fallbackProps = {
 
 const defaultData = [];
 
-export class VictoryHistogram extends React.Component {
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface VictoryHistogramBase
+  extends EventsMixinClass<VictoryHistogramProps> {}
+
+/**
+ * Draw SVG histogram charts with React. VictoryHistogram is a composable component, so it doesn't include axes
+ * Check out VictoryChart for complete histogram charts and more.
+ */
+class VictoryHistogramBase extends React.Component<VictoryHistogramProps> {
   static animationWhitelist = [
     "data",
     "domain",
@@ -59,33 +99,7 @@ export class VictoryHistogram extends React.Component {
 
   static getFormattedData = getFormattedData;
 
-  static propTypes = {
-    ...CommonProps.baseProps,
-    ...CommonProps.dataProps,
-    binSpacing: CustomPropTypes.nonNegative,
-    bins: PropTypes.oneOfType([
-      PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
-      ),
-      CustomPropTypes.nonNegative,
-    ]),
-    cornerRadius: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.func,
-      PropTypes.shape({
-        top: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        topLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        topRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        bottomLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-      }),
-    ]),
-    getPath: PropTypes.func,
-    horizontal: PropTypes.bool,
-  };
-
-  static defaultProps = {
+  static defaultProps: VictoryHistogramProps = {
     containerComponent: <VictoryContainer />,
     data: defaultData,
     dataComponent: <Bar />,
@@ -99,8 +113,9 @@ export class VictoryHistogram extends React.Component {
 
   static getDomain = getDomain;
   static getData = getData;
-  static getBaseProps = (props) => getBaseProps(props, fallbackProps);
-  static expectedComponents = [
+  static getBaseProps = (props: VictoryHistogramProps) =>
+    getBaseProps(props, fallbackProps);
+  static expectedComponents: Partial<keyof VictoryHistogramProps>[] = [
     "dataComponent",
     "labelComponent",
     "groupComponent",
@@ -112,8 +127,8 @@ export class VictoryHistogram extends React.Component {
     return !!this.props.animate;
   }
 
-  render() {
-    const { animationWhitelist, role } = VictoryHistogram;
+  render(): React.ReactElement {
+    const { animationWhitelist, role } = VictoryHistogramBase;
     const props = Helpers.modifyProps(this.props, fallbackProps, role);
 
     if (this.shouldAnimate()) {
@@ -130,4 +145,4 @@ export class VictoryHistogram extends React.Component {
   }
 }
 
-export default addEvents(VictoryHistogram);
+export const VictoryHistogram = addEvents(VictoryHistogramBase);

package/src/index.d.ts

@@ -1,46 +0,0 @@
-import * as React from "react";
-import {
-  EventPropTypeInterface,
-  NumberOrCallback,
-  StringOrNumberOrCallback,
-  VictoryCommonProps,
-  VictoryDatableProps,
-  VictoryMultiLabelableProps,
-  VictoryStyleInterface,
-} from "victory-core";
-
-export type VictoryHistogramTargetType = "data" | "labels" | "parent";
-
-export interface VictoryHistogramProps
-  extends Omit<VictoryCommonProps, "polar">,
-    Omit<VictoryDatableProps, "y" | "y0">,
-    VictoryMultiLabelableProps {
-  binSpacing?: number;
-  bins?: number | number[] | Date[];
-  cornerRadius?:
-    | NumberOrCallback
-    | {
-        top?: NumberOrCallback;
-        topLeft?: NumberOrCallback;
-        topRight?: NumberOrCallback;
-        bottom?: NumberOrCallback;
-        bottomLeft?: NumberOrCallback;
-        bottomRight?: NumberOrCallback;
-      };
-  events?: EventPropTypeInterface<
-    VictoryHistogramTargetType,
-    number | string | number[] | string[]
-  >[];
-  eventKey?: StringOrNumberOrCallback;
-  horizontal?: boolean;
-  style?: VictoryStyleInterface;
-}
-
-/**
- * Draw SVG histogram charts with React. VictoryHistogram is a composable component, so it doesn't include axes
- * Check out VictoryChart for complete histogram charts and more.
- */
-export class VictoryHistogram extends React.Component<
-  VictoryHistogramProps,
-  any
-> {}

package/src/index.js

@@ -1 +0,0 @@
-export { default as VictoryHistogram } from "./victory-histogram";