Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Test change] [Not to merge] Change to enable charts on docsite as PR demosite is not working #33407

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

[Test change] [Not to merge] Change to enable charts on docsite as PR demosite is not working #33407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8783770
Change to enable charts on docsite
AtishayMsft Dec 4, 2024
9e94b75
Fix formatting
AtishayMsft Dec 4, 2024
ff9ded8
Update documentation for schema
AtishayMsft Dec 4, 2024
ddbb735
Merge branch 'master' into charting/declarativeChartDocsite
AtishayMsft Dec 12, 2024
20a2c83
Merge upstream changes
AtishayMsft Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/public-docsite-resources/config/api-docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ module.exports = {
'MultiStackedBarChart',
Copy link
Collaborator

@fabricteam fabricteam Dec 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentuiv8 Visual Regression Report

Callout 2 screenshots
Image Name Diff(in Pixels) Image Type
Callout.Bottom right edge.chromium.png 1596 Changed
Callout.Left top edge.chromium.png 1949 Changed
react-charting-AreaChart 1 screenshots
Image Name Diff(in Pixels) Image Type
react-charting-AreaChart.Custom Accessibility.chromium.png 11 Changed
react-charting-LineChart 1 screenshots
Image Name Diff(in Pixels) Image Type
react-charting-LineChart.Gaps.chromium.png 1 Changed

Copy link
Collaborator

@fabricteam fabricteam Dec 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 2 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.Badge Mask RTL.chromium.png 31 Changed
Avatar Converged.badgeMask.chromium.png 2 Changed
Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.overlay drawer full.chromium.png 1139 Changed

'TreeChart',
'VerticalStackedBarChart',
'DeclarativeChart',
],
},
};
6 changes: 6 additions & 0 deletions apps/public-docsite-resources/src/AppDefinition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,12 @@ export const AppDefinition: IAppDefinition = {
name: 'TreeChart',
url: '#/examples/TreeChart',
},
{
component: require<any>('./components/pages/Charting/DeclarativeChartPage').DeclarativeChartPage,
key: 'DeclarativeChart',
name: 'DeclarativeChart',
url: '#/examples/DeclarativeChart',
},
],
},
{
Expand Down
11 changes: 11 additions & 0 deletions apps/public-docsite-resources/src/components/pages/Charting/DeclarativeChartPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import * as React from 'react';
import { DemoPage } from '../../DemoPage';

import { DeclarativeChartPageProps } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/DeclarativeChart.doc';

export const DeclarativeChartPage = (props: { isHeaderVisible: boolean }) => (
<DemoPage
jsonDocs={require('../../../../dist/api/react-charting/DeclarativeChart.page.json')}
{...{ ...DeclarativeChartPageProps, ...props }}
/>
);
1 change: 1 addition & 0 deletions apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export const categories: { [name: string]: ICategory } = {
SankeyChart: {},
SparklineChart: {},
TreeChart: {},
DeclarativeChart: {},
},
Utilities: {
Announced: {
Expand Down
8 changes: 8 additions & 0 deletions apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.doc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { TFabricPlatformPageProps } from '../../../interfaces/Platforms';
import { DeclarativeChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/DeclarativeChart.doc';

export const DeclarativeChartPageProps: TFabricPlatformPageProps = {
web: {
...(ExternalProps as any),
},
};
8 changes: 8 additions & 0 deletions apps/public-docsite/src/pages/Controls/DeclarativeChartPage/DeclarativeChartPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import * as React from 'react';
import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
import { DeclarativeChartPageProps } from './DeclarativeChartPage.doc';

export const DeclarativeChartPage: React.FunctionComponent<IControlsPageProps> = props => {
const { platform } = props;
return <ControlsAreaPage {...props} {...DeclarativeChartPageProps[platform!]} />;
};
30 changes: 20 additions & 10 deletions ...ges/react-examples/src/react-charting/DeclarativeChart/DeclarativeChart.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@ import * as React from 'react';
import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
import { Toggle } from '@fluentui/react/lib/Toggle';
import { DeclarativeChart, DeclarativeChartProps, Schema } from '@fluentui/react-charting';
import { areaSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_area';
import { donutSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_donut';
import { gaugeSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_gauge';
import { heatmapSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_heatmap';
import { hbcSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_horizontalbar';
import { lineSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_line';
import { pieSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_pie';
import { sankeySchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_sankey';
import { vbcHistogramSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_verticalbar_histogram';
import { vbcSchema } from '@fluentui/react-examples/lib/react-charting/DeclarativeChart/schema/fluent_verticalbar';

interface IDeclarativeChartState {
selectedChoice: string;
Expand All @@ -23,16 +33,16 @@ const options: IDropdownOption[] = [
];

const schemas: any[] = [
{ key: 'areachart', schema: require('./schema/fluent_area.json') },
{ key: 'donutchart', schema: require('./schema/fluent_donut.json') },
{ key: 'gaugechart', schema: require('./schema/fluent_gauge.json') },
{ key: 'heatmapchart', schema: require('./schema/fluent_heatmap.json') },
{ key: 'horizontalbarchart', schema: require('./schema/fluent_horizontalbar.json') },
{ key: 'linechart', schema: require('./schema/fluent_line.json') },
{ key: 'piechart', schema: require('./schema/fluent_pie.json') },
{ key: 'sankeychart', schema: require('./schema/fluent_sankey.json') },
{ key: 'verticalbarchart', schema: require('./schema/fluent_verticalbar.json') },
{ key: 'verticalbar_histogramchart', schema: require('./schema/fluent_verticalbar_histogram.json') },
{ key: 'areachart', schema: areaSchema },
{ key: 'donutchart', schema: donutSchema },
{ key: 'gaugechart', schema: gaugeSchema },
{ key: 'heatmapchart', schema: heatmapSchema },
{ key: 'horizontalbarchart', schema: hbcSchema },
{ key: 'linechart', schema: lineSchema },
{ key: 'piechart', schema: pieSchema },
{ key: 'sankeychart', schema: sankeySchema },
{ key: 'verticalbarchart', schema: vbcSchema },
{ key: 'verticalbar_histogramchart', schema: vbcHistogramSchema },
];

const dropdownStyles = { dropdown: { width: 200 } };
Expand Down
104 changes: 0 additions & 104 deletions packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.json
View file
Open in desktop

This file was deleted.

105 changes: 105 additions & 0 deletions packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_area.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/* eslint-disable @typescript-eslint/naming-convention */
export const areaSchema = {
visualizer: 'plotly',
data: [
{
fill: 'tonexty',
line: {
color: 'rgba(255, 153, 51, 1.0)',
width: '1.3',
},
mode: 'lines',
name: 'a',
type: 'scatter',
x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
y: [
0.17048910089864067, 0.05390702725063046, 0.7560889217240573, 0.7393313216390578, 0.7562979443674754,
0.983908108492343, 0.4552096139092071, 0.751939393026647, 0.42441695150031034, 0.6119820237450841,
],
fillcolor: 'rgba(255, 153, 51, 0.3)',
},
{
fill: 'tonexty',
line: {
color: 'rgba(55, 128, 191, 1.0)',
width: '1.3',
},
mode: 'lines',
name: 'b',
type: 'scatter',
x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
y: [
1.0921498980687505, 0.628379692444796, 1.6804387333467445, 1.1741874271317159, 1.7098535938519392,
1.0165440369832146, 0.8201578488720772, 1.019179653143562, 0.5391840333768539, 0.9023036941696878,
],
fillcolor: 'rgba(55, 128, 191, 0.3)',
},
{
fill: 'tonexty',
line: {
color: 'rgba(50, 171, 96, 1.0)',
width: '1.3',
},
mode: 'lines',
name: 'c',
type: 'scatter',
x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
y: [
1.5084498776097979, 1.0993096327196032, 2.5468884763826125, 1.3139261978658, 1.7288516603693358,
1.3500413551768342, 1.4111774146124456, 1.1245312639069405, 1.4068617318281056, 0.9236499701488171,
],
fillcolor: 'rgba(50, 171, 96, 0.3)',
},
{
fill: 'tonexty',
line: {
color: 'rgba(128, 0, 128, 1.0)',
width: '1.3',
},
mode: 'lines',
name: 'd',
type: 'scatter',
x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
y: [
1.912915766078795, 1.6450103381519354, 3.523866933241722, 1.656799203492564, 2.666064160881149,
2.2985767814076814, 1.6491300653173326, 1.2880873970749964, 2.192375146193222, 1.6271909616796654,
],
fillcolor: 'rgba(128, 0, 128, 0.3)',
},
],
layout: {
legend: {
font: {
color: '#4D5663',
},
bgcolor: '#F5F6F9',
},
xaxis1: {
title: '',
tickfont: {
color: '#4D5663',
},
gridcolor: '#E1E5ED',
titlefont: {
color: '#4D5663',
},
zerolinecolor: '#E1E5ED',
},
yaxis1: {
title: '',
tickfont: {
color: '#4D5663',
},
zeroline: false,
gridcolor: '#E1E5ED',
titlefont: {
color: '#4D5663',
},
zerolinecolor: '#E1E5ED',
},
plot_bgcolor: '#F5F6F9',
paper_bgcolor: '#F5F6F9',
},
frames: [],
selectedLegends: ['a'],
};
65 changes: 0 additions & 65 deletions packages/react-examples/src/react-charting/DeclarativeChart/schema/fluent_donut.json
View file
Open in desktop

This file was deleted.

Loading
Loading