@hubspot/ui-extensions 0.8.30 → 0.8.32

package/dist/experimental/index.d.ts

@@ -5,4 +5,16 @@ declare const Iframe: "Iframe" & {
     readonly props?: types.IframeProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Iframe", types.IframeProps, true>>;
-export { Iframe };
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+declare const BarChart: "BarChart" & {
+    readonly type?: "BarChart" | undefined;
+    readonly props?: types.ChartProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"BarChart", types.ChartProps, true>>;
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+declare const LineChart: "LineChart" & {
+    readonly type?: "LineChart" | undefined;
+    readonly props?: types.ChartProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"LineChart", types.ChartProps, true>>;
+export { Iframe, BarChart, LineChart };

package/dist/experimental/index.js

@@ -1,4 +1,8 @@
 import { createRemoteReactComponent } from '@remote-ui/react';
 /** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
 const Iframe = createRemoteReactComponent('Iframe');
-export { Iframe };
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+const BarChart = createRemoteReactComponent('BarChart');
+/** @experimental This component is experimental. Avoid using it in production due to potential breaking changes. Your feedback is valuable for improvements. Stay tuned for updates. */
+const LineChart = createRemoteReactComponent('LineChart');
+export { Iframe, BarChart, LineChart };

package/dist/types.d.ts

@@ -177,6 +177,143 @@ export interface CardProps {
      */
     children: ReactNode;
 }
+/**
+ * The props type for {@link !components.BarChart}.
+ *
+ * @category Component Props
+ */
+export type BarChartProps = ChartProps;
+/**
+ * The props type for {@link !components.LineChart}.
+ *
+ * @category Component Props
+ */
+export type LineChartProps = ChartProps;
+export interface ChartProps {
+    /**
+     * The data used to render the chart. You can optionally provide configuration options.
+     */
+    data: ChartDataRow[] | {
+        data: ChartDataRow[];
+        options?: ChartDataOptions;
+    };
+    /**
+     * The configuration for the axes of the chart.
+     */
+    axes: ChartAxisPair;
+    /**
+     * Configuration options for the chart as a whole.
+     */
+    options?: ChartOptions;
+}
+export type ChartDataRow = {
+    [key: string]: number | string;
+};
+export type ChartDataOptions = {
+    /**
+     * A mapping of fields to human-readable labels.
+     * We recommend pre-formatting your data to be human-readable instead of using this configuration.
+     */
+    propertyLabels?: {
+        [fields: string]: Record<string, string>;
+    };
+};
+export type ChartAxisPair = {
+    /**
+     * The field to use for the horizontal x-axis.
+     */
+    x: ChartAxis;
+    /**
+     * The field to use for the vertical y-axis.
+     */
+    y: ChartAxis;
+    /**
+     * Configuration options for the pair of axes.
+     */
+    options?: AxisPairOptions;
+};
+export type ChartAxis = {
+    /**
+     * The dataset field that should be graphed on this axis.
+     */
+    field: string;
+    /**
+     * The type of data in the field property. Please read the documentation for the expected formats for each fieldType.
+     */
+    fieldType: ChartFieldType;
+    /**
+     * The axis display label. Note: this will also be used in the legend and the hover tooltips.
+     */
+    label?: string;
+};
+export type AxisPairOptions = {
+    /**
+     * If provided, the data will be grouped by color for this field.
+     */
+    groupFieldByColor?: string;
+    /**
+     * When set to true, grouped data will be stacked.
+     *
+     * @defaultValue `false`
+     */
+    stacking?: boolean;
+    /**
+     * If provided, assigns a color to each specified values of the field provided in `groupFieldByColor`.
+     */
+    colors?: {
+        [key: string]: ChartColor;
+    };
+};
+export declare const chartFieldTypes: {
+    readonly datetime: "datetime";
+    readonly linear: "linear";
+    readonly category: "category";
+};
+/**
+ * The type of field for this axis.
+ * - `datetime`: Used for time data, such as JavaScript timestamps.
+ * - `linear`: Used for numerical data, such as quantities.
+ * - `category`: Used for categorical data, such as different types of products.
+ *
+ * Please read the documentation for recommended usage.
+ */
+export type ChartFieldType = keyof typeof chartFieldTypes;
+export type ChartOptions = {
+    /**
+     * Renders a title above the chart.
+     */
+    title?: string;
+    /**
+     * When set to `true`, shows a legend for the chart.
+     *
+     * @defaultValue `false`
+     */
+    showLegend?: boolean;
+    /**
+     * When set to `true`, shows hover tooltips for the charted data.
+     *
+     * @defaultValue `false`
+     */
+    showTooltips?: boolean;
+    /**
+     * When set to `true`, shows labels for the data directly on the chart.
+     *
+     * @defaultValue `false`
+     */
+    showDataLabels?: boolean;
+    /**
+     * Use to choose the order in which our chart colors are assigned to your data. Unspecified colors will be chosen after the ones you've provided here,
+     * so you don't need to provide a complete list of all possible colors.
+     * Please read the documentation for guidance on color usage.
+     */
+    colorList?: ChartColor[];
+    /** @deprecated use colorList instead */
+    colors?: ChartColor[];
+};
+/**
+ * The allowed colors for data displayed on the chart.
+ */
+export type ChartColor = 'orange' | 'aqua' | 'purple' | 'yellow' | 'pink' | 'blue' | 'green' | 'darkOrange' | 'darkAqua' | 'darkPurple' | 'darkYellow' | 'darkPink' | 'darkBlue' | 'darkGreen';
 /**
  * The props type for {@link !components.DescriptionListItem}.
  *
@@ -1351,6 +1488,10 @@ export interface StatisticsTrendProps {
      * @defaultValue `"increase"`
      */
     direction: 'increase' | 'decrease';
+    /**
+     * The color of the trend arrow.
+     */
+    color?: 'red' | 'green';
 }
 /**
  * The props type for {@link !components.StatisticsItem}.
@@ -1484,7 +1625,7 @@ export interface ExtensionCardContextData {
     objectId: number | string;
     objectTypeId: string;
     location: keyof ExtensionPoints;
-    appAccessLevel?: 'PRIVATE' | 'PUBLIC';
+    appAccessLevel: 'PRIVATE' | 'PUBLIC';
 }
 /** @ignore */
 export type ExtensionPointAction = (...args: any[]) => Promise<any> | void;

package/dist/types.js

@@ -17,6 +17,11 @@ export class FormSubmitExtensionEvent extends ExtensionEvent {
         this.targetValue = value;
     }
 }
+export const chartFieldTypes = {
+    datetime: 'datetime',
+    linear: 'linear',
+    category: 'category',
+};
 export const iconNames = {
     success: 'success',
     remove: 'remove',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.8.30",
+  "version": "0.8.32",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "389360d4b4301252237feec1cf0fcf3b01a20f0c"
+  "gitHead": "b592c6da355c4287b3498686743cdcbeb230e20b"
 }