KSDensityCalendar is a complex custom component for visualizing the aggregation of schedules in a monthly calendar view, a generic week view, and an hours of the day view. It takes an array of objects where each object holds 3 key value pairs. These pairs are "name":"string", "start":"date", and "end": "date". The component then distributes the availability across a calendar view, a generic week view, and day view depending upon the use case. It will use the total names in the denominator to find what portion of the names falls under a given date for availability. It then calculates a percentage for each day to give the viewer a sense of where more scheduling for an activity is occurring. The user can click a date cell with a relative percentage to drill down to an hours of the day view for getting a similar sense of relative density for scheduled activity. In the generic week view it gives the viewer the same sense of relative availability for the days of the week in general with the ability to drill down to an hours of the day view.
storybook link: https://643076914824b810b6eacd55-tjawjlhgxz.chromatic.com/?path=/story/ksdensitycalendar--default
Storybook notes- Whenever you see a prop that states in the description that it accepts a string, number, or object the optional object uses mui's default breakpoints. Those being:
xs, extra-small: 0px
sm, small: 600px
md, medium: 900px
lg, large: 1200px
xl, extra-large: 1536px
The component's dependencies:
dev- "@babel/core": "^7.21.3", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.0", "@rollup/plugin-commonjs": "^24.0.1", "@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-terser": "^0.4.0", "@rollup/plugin-typescript": "^11.0.0", "@storybook/addon-actions": "^6.5.16", "@storybook/addon-essentials": "^6.5.16", "@storybook/addon-interactions": "^6.5.16", "@storybook/addon-links": "^6.5.16", "@storybook/addon-viewport": "^6.5.16", "@storybook/builder-webpack5": "^6.5.16", "@storybook/manager-webpack5": "^6.5.16", "@storybook/react": "^6.5.16", "@storybook/testing-library": "^0.0.13", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@types/istanbul-lib-report": "^3.0.0", "@types/jest": "^29.5.0", "@types/node": "^18.15.10", "@types/react": "^18.0.29", "babel-loader": "^8.3.0", "chromatic": "^6.17.3", "istanbul-lib-report": "^3.0.0", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "rollup": "^3.20.2", "rollup-plugin-dts": "^5.3.0", "ts-jest": "^29.0.5", "ts-node": "^10.9.1", "tslib": "^2.5.0", "typescript": "^5.0.2"
prod- "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@mui/icons-material": "^5.11.11", "@mui/material": "^5.11.14", "date-fns": "^2.29.3"