HTML Examples¶
This page provides a list of examples that demonstrate rendering html tables from the given dataframe. Each example is self-contained inside a class. We have some helper functions to provide the data we need for this examples
Helper Functions (Data loading routines)¶
1import tempfile
2import webbrowser
3import zipfile
4
5import pandas as pd
6import requests
7
8import table_compositor.html_styles as html_style
9import table_compositor.html_writer as htmlw
10import table_compositor.table_compositor as tc
11
1# code snippet adapted from http://function-pipe.readthedocs.io/en/latest/usage_df.html
2# source url
3URL_NAMES = "https://www.ssa.gov/oact/babynames/names.zip"
4ZIP_NAME = "names.zip"
5
6
7def load_names_data():
8 fp = os.path.join(tempfile.gettempdir(), ZIP_NAME)
9 if not os.path.exists(fp):
10 r = requests.get(URL_NAMES)
11 with open(fp, "wb") as f:
12 f.write(r.content)
13
14 post = collections.OrderedDict()
15 with zipfile.ZipFile(fp) as zf:
16 # get ZipInfo instances
17 for zi in sorted(zf.infolist(), key=lambda zi: zi.filename):
18 fn = zi.filename
19 if fn.startswith("yob"):
20 year = int(fn[3:7])
21 df = pd.read_csv(
22 zf.open(zi), header=None, names=("name", "gender", "count")
23 )
24 df["year"] = year
25 post[year] = df
26
27 df = pd.concat(post.values())
28 df.set_index("name", inplace=True, drop=True)
29 return df
30
31
32def sample_names_data():
33 df = load_names_data()
34 df = df[(df["year"] == 2015) & (df["count"] > 1000)]
35 return df.sample(50, random_state=0).sort_values("count")
36
37
38def top_names_for_year(year=2015, gender="F", top_n=5):
39 df = load_names_data()
40 df = df[(df["year"] == year) & (df["gender"] == gender)]
41 df = df.sort_values("count")[:top_n]
42 return df
43
44
Example 1 - DataFrame with default styles¶
Demonstrates converting dataframe into html format with default styles.
1class HTMLExample1:
2 """
3 Demonstrate rendering of a simple dataframe into html
4 """
5
6 @classmethod
7 def render_html(cls):
8
9 # load data
10 df = load_names_data()
11 df = df[:100]
12
13 # build presentation model
14 pm = tc.build_presentation_model(df=df, output_format="html")
15
16 # render to xlsx
17 tempdir = tempfile.gettempdir()
18 fp = os.path.join(tempdir, "example_1.html")
19 layout = [pm]
20 print("Writing to " + fp)
21 html = htmlw.HTMLWriter.to_html(layout, border=1)
22 output_fp = os.path.join(tempfile.gettempdir(), "example1.html")
23 with open(output_fp, "w") as f:
24 f.write(html)
25
26
Example 2 - DataFrame with custom styles¶
In this example, we format the different components of dataframe with various styling attributes
1class HTMLExample2:
2 """
3 Demonstrate rendering of a simple dataframe into html
4 """
5
6 @staticmethod
7 def data_value_func(df):
8 def _inner(idx, col):
9 if col == "gender":
10 if df.loc[idx, col] == "F":
11 return "Female"
12 return "Male"
13 return df.loc[idx, col]
14
15 return _inner
16
17 @staticmethod
18 def data_style_func(df):
19 def _inner(idx, col):
20 color = "#FFFFFF"
21 text_align = "left"
22 if col == "count":
23 text_align = "right"
24 if df.loc[idx, "gender"] == "F":
25 color = "#bbdef8"
26 else:
27 color = "#e3f2fd"
28 return html_style.td_style(
29 text_align=text_align,
30 background_color=color,
31 color="#000000",
32 font_weight="normal",
33 white_space="pre",
34 padding="10px",
35 border=None,
36 )
37
38 return _inner
39
40 @staticmethod
41 def index_name_value_func(value):
42 return value.capitalize()
43
44 @staticmethod
45 def header_value_func(node):
46 return node.value.capitalize()
47
48 @staticmethod
49 def header_style_func(node):
50 return html_style.td_style(
51 text_align="center",
52 background_color="#4F81BD",
53 color="#FFFFFF",
54 font_weight="bold",
55 white_space="pre",
56 padding="10px",
57 border=1,
58 )
59
60 @staticmethod
61 def index_value_func(node):
62 return node.value.capitalize()
63
64 @staticmethod
65 def index_style_func(node):
66 return html_style.td_style(
67 text_align="center",
68 background_color="#4F81BD",
69 color="#FFFFFF",
70 font_weight="bold",
71 white_space="pre",
72 padding="10px",
73 border=1,
74 )
75
76 @classmethod
77 def render_html(cls):
78 # load data
79 df = sample_names_data()
80 # build presentation model
81 klass_ = HTMLExample2
82 pm = tc.build_presentation_model(
83 df=df,
84 output_format="html",
85 data_value_func=klass_.data_value_func(df),
86 data_style_func=klass_.data_style_func(df),
87 header_value_func=klass_.header_value_func,
88 header_style_func=klass_.header_style_func,
89 index_style_func=klass_.index_style_func,
90 index_value_func=klass_.index_value_func,
91 index_name_func=klass_.index_name_value_func,
92 )
93
94 layout = [pm]
95 html = htmlw.HTMLWriter.to_html(layout, border=1)
96 output_fp = os.path.join(tempfile.gettempdir(), "example2.html")
97 print("Writing to =", output_fp)
98 with open(output_fp, "w") as f:
99 f.write(html)
100
101
Example 3 - Simple DataFrame with Layouts¶
Demonstrates rendering dataframes with multi-hierarchical indices and mult-hierarchical columns
1class HTMLExample3:
2 """
3 Demonstrate styling and rendering of multiple multi-hierarchical indexed dataframe
4 into a html file
5 """
6
7 @staticmethod
8 def data_value_func(df):
9 def _inner(idx, col):
10 if col == "gender":
11 if df.loc[idx, col] == "F":
12 return "Female"
13 return "Male"
14 return df.loc[idx, col]
15
16 return _inner
17
18 @staticmethod
19 def data_style_func(df):
20 def _inner(idx, col):
21 color = "#FFFFFF"
22 text_align = "left"
23 if col == "count":
24 text_align = "right"
25 if df.loc[idx, "gender"] == "F":
26 color = "#bbdef8"
27 else:
28 color = "#e3f2fd"
29 return html_style.td_style(
30 text_align=text_align,
31 background_color=color,
32 color="#000000",
33 font_weight="normal",
34 white_space="pre",
35 padding="10px",
36 border=None,
37 )
38
39 return _inner
40
41 @staticmethod
42 def index_name_value_func(value):
43 return "Max By Year"
44
45 @staticmethod
46 def header_value_func(node):
47 return node.value.capitalize()
48
49 @staticmethod
50 def header_style_func(node):
51 return html_style.td_style(
52 text_align="center",
53 background_color="#4F81BD",
54 color="#FFFFFF",
55 font_weight="bold",
56 white_space="pre",
57 padding="10px",
58 border=1,
59 )
60
61 @staticmethod
62 def index_value_func(node):
63 if isinstance(node.value, str):
64 return node.value.capitalize()
65 return node.value
66
67 @staticmethod
68 def index_style_func(node):
69 return html_style.td_style(
70 text_align="center",
71 background_color="#4F81BD",
72 color="#FFFFFF",
73 font_weight="bold",
74 white_space="pre",
75 padding="10px",
76 border=1,
77 )
78
79 @classmethod
80 def render_html(cls):
81
82 # Prepare first data frame (same as in render_xlsx)
83 df = sample_names_data()
84 # build presentation model
85 klass_ = HTMLExample4
86 pm_all = tc.build_presentation_model(
87 df=df,
88 output_format="html",
89 data_value_func=klass_.data_value_func(df),
90 data_style_func=klass_.data_style_func(df),
91 header_value_func=klass_.header_value_func,
92 header_style_func=klass_.header_style_func,
93 index_style_func=klass_.index_style_func,
94 index_value_func=klass_.index_value_func,
95 index_name_func=lambda _: "Sample Data",
96 )
97
98 male_df = top_names_for_year(gender="M")
99 pm_top_male = tc.build_presentation_model(
100 df=male_df,
101 output_format="html",
102 data_value_func=klass_.data_value_func(male_df),
103 data_style_func=klass_.data_style_func(male_df),
104 header_value_func=klass_.header_value_func,
105 header_style_func=klass_.header_style_func,
106 index_style_func=klass_.index_style_func,
107 index_value_func=klass_.index_value_func,
108 index_name_func=lambda _: "Max by Year",
109 )
110
111 female_df = top_names_for_year(gender="F")
112 pm_top_female = tc.build_presentation_model(
113 df=female_df,
114 output_format="html",
115 data_value_func=klass_.data_value_func(female_df),
116 data_style_func=klass_.data_style_func(female_df),
117 header_value_func=klass_.header_value_func,
118 header_style_func=klass_.header_style_func,
119 index_style_func=klass_.index_style_func,
120 index_value_func=klass_.index_value_func,
121 index_name_func=lambda _: "Max by Year",
122 )
123
124 layout = [pm_all, [pm_top_female, pm_top_male]]
125 # render to xlsx
126 html = htmlw.HTMLWriter.to_html(layout, border=1, orientation="horizontal")
127 output_fp = os.path.join(tempfile.gettempdir(), "example3.html")
128 print("Writing to =", output_fp)
129 with open(output_fp, "w") as f:
130 f.write(html)
131
132
Example 4 - DataFrames with Multi-hierarchical columns and indices¶
Demonstrates rendering dataframes with multi-hierarchical indices and mult-hierarchical columns
1class HTMLExample4:
2 """
3 Demonstrate styling and rendering of multi-hierarchical indexed dataframe
4 into a html file.
5 """
6
7 @staticmethod
8 def data_value_func(df):
9 def _inner(idx, col):
10 if col == "gender":
11 if df.loc[idx, col] == "F":
12 return "Female"
13 return "Male"
14 return df.loc[idx, col]
15
16 return _inner
17
18 @staticmethod
19 def data_style_func(df):
20 def _inner(idx, col):
21 color = "#FFFFFF"
22 text_align = "left"
23 if col == "count":
24 text_align = "right"
25 if idx[1] == "F":
26 color = "#bbdef8"
27 else:
28 color = "#e3f2fd"
29
30 return html_style.td_style(
31 text_align=text_align,
32 background_color=color,
33 color="#000000",
34 font_weight="normal",
35 white_space="pre",
36 padding="10px",
37 border=None,
38 )
39
40 return _inner
41
42 @staticmethod
43 def index_name_value_func(value):
44 return "Max By Year"
45
46 @staticmethod
47 def header_value_func(node):
48 return node.value.capitalize()
49
50 @staticmethod
51 def header_style_func(node):
52 return html_style.td_style(
53 text_align="center",
54 background_color="#4F81BD",
55 color="#FFFFFF",
56 font_weight="bold",
57 white_space="pre",
58 padding="10px",
59 border=1,
60 )
61
62 @staticmethod
63 def index_value_func(node):
64 if isinstance(node.value, str):
65 return node.value.capitalize()
66 return node.value
67
68 @staticmethod
69 def index_style_func(node):
70 return html_style.td_style(
71 text_align="center",
72 background_color="#4F81BD",
73 color="#FFFFFF",
74 font_weight="bold",
75 white_space="pre",
76 padding="10px",
77 border=1,
78 )
79
80 @classmethod
81 def render_html(cls):
82
83 # Prepare first data frame (same as in render_xlsx)
84 data_df = load_names_data()
85 data_df = data_df[data_df["year"] >= 2000]
86 g = data_df.groupby(("year", "gender"))
87 df = g.max()
88
89 klass_ = cls
90 pm = tc.build_presentation_model(
91 df=df,
92 output_format="html",
93 data_value_func=klass_.data_value_func(df),
94 data_style_func=klass_.data_style_func(df),
95 header_value_func=klass_.header_value_func,
96 header_style_func=klass_.header_style_func,
97 index_style_func=klass_.index_style_func,
98 index_value_func=klass_.index_value_func,
99 index_name_func=klass_.index_name_value_func,
100 )
101
102 layout = [pm]
103 # render to xlsx
104 html = htmlw.HTMLWriter.to_html(layout, border=1)
105 output_fp = os.path.join(tempfile.gettempdir(), "example4.html")
106 print("Writing to =", output_fp)
107 with open(output_fp, "w") as f:
108 f.write(html)
109
110