chore: calender chart typography (apache#561)

* Not a component * swith to emotion styled * add proptypes to pass unit test * fix * fix: packackage.js * Update Calendar.js
zhaoyongjie · Nov 24, 2021 · a4dc828 · a4dc828
1 parent 3d42fba
commit a4dc828
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 32 deletions.
diff --git a/...ntend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-calendar/package.json b/...ntend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-calendar/package.json
@@ -34,12 +34,14 @@
     "prop-types": "^15.6.2"
   },
   "peerDependencies": {
+    "react": "^16.13.1",
     "@superset-ui/chart": "^0.13.0",
     "@superset-ui/color": "^0.13.0",
     "@superset-ui/control-utils": "^0.13.3",
     "@superset-ui/number-format": "^0.13.0",
     "@superset-ui/time-format": "^0.13.0",
     "@superset-ui/translation": "^0.13.0",
+    "@superset-ui/style": "^0.13.21",
     "@superset-ui/validator": "^0.13.3"
   }
 }
diff --git a/...d/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-calendar/src/Calendar.css b/...d/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-calendar/src/Calendar.css
diff --git a/...nd/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-calendar/src/Calendar.js b/...nd/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-calendar/src/Calendar.js
@@ -24,7 +24,6 @@ import { getNumberFormatter } from '@superset-ui/number-format';
 import { getTimeFormatter } from '@superset-ui/time-format';
 import CalHeatMap from './vendor/cal-heatmap';
 import './vendor/cal-heatmap.css';
-import './Calendar.css';
 
 function convertUTC(dttm) {
   return new Date(
@@ -124,7 +123,6 @@ function Calendar(element, props) {
     const legendColors = legend.map(x => colorScale(x));
 
     const cal = new CalHeatMap();
-
     cal.init({
       start: convertUTCTS(data.start),
       data: timestamps,

diff --git a/...lugin-chart-calendar/src/ReactCalendar.js → ...ugin-chart-calendar/src/ReactCalendar.jsx b/...lugin-chart-calendar/src/ReactCalendar.js → ...ugin-chart-calendar/src/ReactCalendar.jsx
@@ -16,7 +16,40 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import React from 'react';
+import PropTypes from 'prop-types';
 import { reactify } from '@superset-ui/chart';
+import styled from '@superset-ui/style';
 import Component from './Calendar';
 
-export default reactify(Component);
+const ReactComponent = reactify(Component);
+
+const Calender = ({ className, ...otherProps }) => {
+  return (
+    <div className={className}>
+      <ReactComponent {...otherProps} />
+    </div>
+  );
+};
+
+Calender.defaultProps = {
+  otherProps: {},
+};
+
+Calender.propTypes = {
+  className: PropTypes.string.isRequired,
+  otherProps: PropTypes.objectOf(PropTypes.any),
+};
+
+export default styled(Calender)`
+  .superset-legacy-chart-calendar {
+    padding: 10px;
+    position: static !important;
+    overflow: auto !important;
+  }
+
+  .superset-legacy-chart-calendar .ch-tooltip {
+    margin-left: 20px;
+    margin-top: 5px;
+  }
+`;