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.

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

[docs][joy-ui] Integrate a count-up feature to the Circular Progress #38739

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
3947c8c
logo refinement
danilo-leal Jan 4, 2022
5e1ea40
https://github.com/mui/material-ui/issues/38682
xcode-it Aug 30, 2023
2432c5f
following @danilo-leal suggestions
xcode-it Aug 30, 2023
04d3626
Merge branch 'master' of https://github.com/mui/material-ui into coun…
xcode-it Aug 30, 2023
7598189
undo-prettier-edits
xcode-it Aug 30, 2023
82f4fdb
Merge branch 'master' of https://github.com/mui/material-ui into coun…
xcode-it Aug 31, 2023
dbda4d5
follow-@siriwatknp-review
xcode-it Aug 31, 2023
026da55
fix-function-name
xcode-it Aug 31, 2023
3afe116
Merge branch 'mui:master' into count-up-feature
xcode-it Aug 31, 2023
3e2df8f
Reorder doc page
zanivan Sep 1, 2023
0afea82
Visual and UX tweaks to the demo
zanivan Sep 1, 2023
5082859
Run yarn docs:typescript:formatted
zanivan Sep 1, 2023
9e23972
Merge remote-tracking branch 'origin/master' into pr/38739
danilo-leal Sep 11, 2023
c636580
format documentation
danilo-leal Sep 11, 2023
cee9195
demos simplifications
danilo-leal Sep 11, 2023
dfbb8de
Merge branch 'master' into circular-progress-count-up-feature
danilo-leal Sep 11, 2023
4dbf9ab
Merge branch 'mui:master' into circular-progress-count-up-feature
xcode-it Sep 11, 2023
cabde8f
undo remote-tracking branch 'origin/master' into pr/38739
xcode-it Sep 12, 2023
2a98c2b
Merge branch 'master' of github.com:mui/material-ui into HEAD
xcode-it Sep 12, 2023
683699c
undo-logo-refinement
xcode-it Sep 12, 2023
73cc492
Merge branch 'master' of github.com:mui/material-ui into circular-pro…
xcode-it Sep 12, 2023
d22c32b
Merge branch 'circular-progress-count-up-feature' of github.com:anon-…
xcode-it Sep 12, 2023
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import * as React from 'react';
import Stack from '@mui/joy/Stack';
import Button from '@mui/joy/Button';
import Typography from '@mui/joy/Typography';
import CircularProgress from '@mui/joy/CircularProgress';
import { useCountUp } from 'use-count-up';

export default function CircularProgressCountUp() {
const [isLoading, setIsLoading] = React.useState(false);
const [buttonLabel, setButtonLabel] = React.useState('Start'); // Track button label

const { value: value1, reset: resetValue1 } = useCountUp({
isCounting: isLoading,
duration: 1,
start: 0,
end: 25,
onEnd: () => {
setIsLoading(false);
setButtonLabel('Reset'); // Change the button label when loading is complete
},
});

const { value: value2, reset } = useCountUp({
isCounting: true,
duration: 1,
start: 0,
end: 75,
});

const handleButtonClick = () => {
if (isLoading) {
setIsLoading(false);
setButtonLabel('Start');
resetValue1(); // Reset the value
} else {
setIsLoading(true);
setButtonLabel('Reset');
}
};

return (
<Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
<Stack spacing={2}>
<CircularProgress size="lg" determinate value={value1}>
<Typography>{value1}%</Typography>
</CircularProgress>
<Button
size="sm"
variant="outlined"
color="neutral"
onClick={handleButtonClick} // Use a single click handler
>
{buttonLabel}
</Button>
</Stack>
<Stack spacing={2}>
<CircularProgress size="lg" determinate value={value2}>
<Typography>{value2}%</Typography>
</CircularProgress>
<Button size="sm" variant="outlined" color="neutral" onClick={reset}>
Reload
</Button>
</Stack>
</Stack>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import * as React from 'react';
import Stack from '@mui/joy/Stack';
import Button from '@mui/joy/Button';
import Typography from '@mui/joy/Typography';
import CircularProgress from '@mui/joy/CircularProgress';
import { useCountUp } from 'use-count-up';

export default function CircularProgressCountUp() {
const [isLoading, setIsLoading] = React.useState(false);
const [buttonLabel, setButtonLabel] = React.useState('Start'); // Track button label

const { value: value1, reset: resetValue1 } = useCountUp({
isCounting: isLoading,
duration: 1,
start: 0,
end: 25,
onEnd: () => {
setIsLoading(false);
setButtonLabel('Reset'); // Change the button label when loading is complete
},
});

const { value: value2, reset } = useCountUp({
isCounting: true,
duration: 1,
start: 0,
end: 75,
});

const handleButtonClick = () => {
if (isLoading) {
setIsLoading(false);
setButtonLabel('Start');
resetValue1(); // Reset the value
} else {
setIsLoading(true);
setButtonLabel('Reset');
}
};

return (
<Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
<Stack spacing={2}>
<CircularProgress size="lg" determinate value={value1}>
<Typography>{value1}%</Typography>
</CircularProgress>
<Button
size="sm"
variant="outlined"
color="neutral"
onClick={handleButtonClick} // Use a single click handler
>
{buttonLabel}
</Button>
</Stack>
<Stack spacing={2}>
<CircularProgress size="lg" determinate value={value2}>
<Typography>{value2}%</Typography>
</CircularProgress>
<Button size="sm" variant="outlined" color="neutral" onClick={reset}>
Reload
</Button>
</Stack>
</Stack>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,14 @@ The size of the Circular Progress is controlled by a button, an icon button, or

{{"demo": "CircularProgressButton.js"}}

## Third-party integrations

### use-count-up

Use the `useCountUp` hook from the [use-count-up](https://www.npmjs.com/package/use-count-up) package to create a counting animation by providing `start`, `end`, and `duration` values.

{{"demo": "CircularProgressCountUp.js"}}

## CSS variables playground

Play around with all the CSS variables available on the component to see how the design changes.
Expand Down
5 changes: 4 additions & 1 deletion docs/public/static/logo.svg
Copy link
Contributor

Choose a reason for hiding this comment

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

This, and the file below, shouldn't be here. 🤔 Don't know how they got picked up.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

it's an old commit, from this PR

strange though...

Copy link
Contributor

Choose a reason for hiding this comment

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

Can we remove it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Can we remove it?

removed...

undo-logo-refinement

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions docs/src/icons/SvgMuiLogomark.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@ export default function SvgMuiLogomark(props: RootSvgProps) {
return (
<RootSvg
xmlns="http://www.w3.org/2000/svg"
width={36}
width={35}
height={32}
viewBox="0 0 36 32"
viewBox="0 0 35 32"
fill="none"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z"
d="M10.992 6.412 1.504.877A1 1 0 0 0 0 1.741v15.627a2 2 0 0 0 .971 1.715l2.514 1.508A1 1 0 0 0 5 19.734v-9.01a1 1 0 0 1 1.496-.87l4.512 2.579a2 2 0 0 0 1.984 0l4.512-2.578a1 1 0 0 1 1.496.868v4.116a2 2 0 0 1-1.008 1.737l-5.236 2.992A1.5 1.5 0 0 0 12 20.87v4.06a2 2 0 0 0 .89 1.664l7.081 4.72a2 2 0 0 0 2.102.073l12.171-6.955A1.5 1.5 0 0 0 35 23.13V12.265a1 1 0 0 0-1.514-.857l-2.515 1.508A2 2 0 0 0 30 14.632v5.485a1.5 1.5 0 0 1-.771 1.312l-7.43 4.127a1.5 1.5 0 0 1-1.56-.063l-2.424-1.616a1 1 0 0 1 .04-1.69l5.174-3.104A2 2 0 0 0 24 17.368V1.74a1 1 0 0 0-1.504-.864l-9.488 5.535a2 2 0 0 1-2.016 0Z M34.029 7.583 31.514 9.09A1 1 0 0 1 30 8.234V4.132a2 2 0 0 1 .971-1.715L33.486.91A1 1 0 0 1 35 1.766v4.102a2 2 0 0 1-.971 1.715Z"
fill="#007FFF"
/>
</RootSvg>
Expand Down